问题是，存在PHP生成的HTML段，并且存在一个单独的JavaScript段来进行添加（当有人按下“添加新页面”按钮）。这不仅是重复的。在JavaScript中内联完成时，要看它非常难看（看那行的长度！）。
还有更好的方法吗？
<?php
/** @var $this Zend_View */
$this->headLink()->appendStylesheet($this->baseUrl('css/redmond/jquery-ui-1.8.5.custom.css'));
$this->headScript()->appendFile($this->baseUrl('js/jquery.js'));
$this->headScript()->appendFile($this->baseUrl('js/jquery-ui-1.8.5.custom.min.js'));
$this->headScript()->captureStart(); ?>
//<script language="text/javascript">
function CreateDateboxes(jqObject) {
jqObject.datepicker({
dateFormat: 'yy-mm-dd',
showOn: 'button',
changeYear: true,
changeMonth: true
});
}
function RemoveParent() {
$(this).parent().parent().remove();
}
function AddNewEvent() {
var today, html, temp, datestring;
today = new Date();
datestring = (today.getYear()+1900) + '-' + (today.getMonth()+1) + '-' + today.getDate();
html = '<li class="ui-content">\n <div style="float: left; width: 200px;">\n <span class="ui-icon ui-icon-trash ui-button ui-state-active" style="float: left; margin:3px;"></span>\n <input name="dates[]" class="datebox" style="width: 120px;" type="text" value="' + datestring + '" />\n </div>\n <div style="padding-left: 200px;">\n <input name="contents[]" type="text" style="width: 100%;" />\n </div>\n</li>';
$(this).after(html);
temp = $(this).next();
CreateDateboxes($('.datebox', temp));
$('.ui-icon-trash', temp).click(RemoveParent);
}
$(function() {
CreateDateboxes($('.datebox'));
$('.ui-icon-trash').click(RemoveParent);
$('.ui-icon-plus').parent().click(AddNewEvent);
});
//</script>
<?php $this->headScript()->captureEnd(); ?>
<div class="story">
<form action="<?= $this->url(array('controller' => 'admin', 'action' => 'applyEvents')) ?>" method="post">
<ul style="list-style: none; margin-bottom: 1em; padding: 0; width: 100%;">
<li class="ui-button ui-state-default" style="width: 100%; margin-bottom: 5px;"><span class="ui-icon ui-icon-plus" style="float: left;"></span>
Add a new Event</li>
<? foreach ($this->events as $event) { ?>
<li class="ui-content">
<div style="float: left; width: 200px;">
<span class="ui-icon ui-icon-trash ui-button ui-state-active" style="float: left; margin:3px;"></span>
<input name="dates[]" class="datebox" style="width: 120px;" type="text" value="<?= $event->GetDate()->format('Y-m-d') ?>" />
</div>
<div style="padding-left: 200px;">
<input name="contents[]" type="text" value="<?= $event->GetMessage() ?>" style="width: 100%;" />
</div>
</li>
<? } ?>
</ul>
<input type="submit" name="submit" value="Apply" />
<input type="submit" name="submit" value="Cancel" />
</form>
</div>
#1 楼
我假设从查看您正在使用Zend Framework的代码开始。我已经使用php局部变量解决了Zend和Symfony中的类似问题。视图：<li class="ui-content">
<div style="float: left; width: 200px;">
<span class="ui-icon ui-icon-trash ui-button ui-state-active" style="float: left; margin:3px;"></span>
<input name="dates[]" class="datebox" style="width: 120px;" type="text" value="<?php echo $date ?>" />
</div>
<div style="padding-left: 200px;">
<input name="contents[]" type="text" value="<?php echo $message ?>" style="width: 100%;" />
</div>
</li>
然后为您的JavaScript：
<?php foreach ($this->events as $event): ?>
<?php echo $this->partial('list_item.phtml', array(
'date' => $event->GetDate()->format('Y-m-d'),
'message' => $event->GetMessage(),
)); ?>
<?php endforeach; ?>
中提琴！没有模板重复，因为受影响的代码是局部的。没有多余的javscript模板库，尽管如果这种情况在您的应用程序中很普遍，我建议您进行一些重构和实现这样的模板库。
这种方法对工作流程的影响最小，几乎没有学习曲线，并且花费很少的开发时间来减少重复工作（老板喜欢听这种事情）。
评论
\ $ \ begingroup \ $
+1光滑！ （但是，如果您要在生产环境中执行此操作，则应该使用json_encode而不是str_replace ：）
\ $ \ endgroup \ $
–比利·奥尼尔（Billy ONeal）
2011-2-10在16:03
\ $ \ begingroup \ $
这也没有像以前的代码那样在客户端上设置日期。我最终使用了类似这样的东西，除了我将JavaScript替换为pastebin.com/MmFcrbHu
\ $ \ endgroup \ $
–比利·奥尼尔（Billy ONeal）
2011-2-13在0:53
\ $ \ begingroup \ $
它应该打印日期。问题是我的部分_list_item.phtml中的类型。只需将echo $ message替换为echo $ date。我的错。我已经更新了上面的代码。
\ $ \ endgroup \ $
– xzyfer
2011年2月13日在1:03
\ $ \ begingroup \ $
@zxyfer：哈哈-甚至没有注意到（我没有完全复制/粘贴……）
\ $ \ endgroup \ $
–比利·奥尼尔（Billy ONeal）
2011年2月13日在1:49
评论
使用诸如Mustache之类的东西，这是一个模板化框架，在客户端和服务器端都具有渲染器，从而可以避免代码重复。模板肯定是答案。另一个选项是beebole.com/pure，用于客户端模板。使用模板，您可以将html放在一个地方，然后将其添加到javascript中的变量中，然后将html变量附加到应用模板的节点中。没有重复的html，没有ajax。
就在一周前，我遇到了类似的问题，我也厌倦了快速复制。我只是创建了一个JavaScript函数来将数据打印到页面上，并制作了PHP代码来打印对该函数的JavaScript调用。这样，代码变得更加简洁。