使用 jQuery 的下划线模板中的引用错误答案

【问题标题】：Reference error in underscore template with jQuery使用 jQuery 的下划线模板中的引用错误
【发布时间】：2013-07-02 14:43:54
【问题描述】：

代码来自 Addy Osmani：Learning JavaScript Design Patterns，我并没有真正得到实现。

这里我可能是瞎了眼，但我看不出这有什么问题：

ReferenceError：找不到变量：项目

下划线模板：

<script id="resultTemplate" type="text/html">
    <% _.each(items, function( item ){  %>
            <li><p><img src="<%= item %>"/></p></li>
    <% });%>
</script>

jQuery:

var resultTemplate = _.template($("#resultTemplate").html());

[...]

演示：jsFiddle

【问题讨论】：

你在哪里定义了items？
从 Flickr 返回，见 fiddle

标签： jquery templates underscore.js

【解决方案1】：

简短的回答：使用这个 Tiny Pub/Sub 插件将数组作为参数传递并不容易/方便。

您可以在此处查看文档https://gist.github.com/cowboy/661855。如您所见，在$.subscribe() 部分，数组元素只能一个一个地传递，因此在您的示例中它可以这样工作：

$.subscribe("/search/resultSet" , function(e, item1, item2, item3){
    $("#searchResults").append(resultTemplate(item1));
    $("#searchResults").append(resultTemplate(item2));
    $("#searchResults").append(resultTemplate(item3));
    // and so on
});

...模板应该相应更新。

当然这一点都不方便。如果你不想为当前的插件做一个丑陋的解决方法，我建议你谷歌搜索另一个支持 Pub/Sub 模式的插件（如果你仍然想使用它）。我发现的另一个来源是：Passing arrays via jQuery tiny PubSub

希望这会有所帮助；）

【讨论】：

【解决方案2】：

这行得通：

// Subscribe to the new results topic
$.subscribe( "/search/resultSet" , function( e, results ){

    $( "#searchResults" ).append(resultTemplate( {items: results} ));

});

_.template() 爆炸你传递给它的对象。因此，不要传递结果对象，而是传递一个包含由结果组成的项目对象的对象。模板将其分解并能够迭代项目。

见：http://jsfiddle.net/nmBGC/2/

【讨论】：