好吧,我正在玩弄 Backbone、node.js、Underscore、Backbone Boilerplate,所以我有足够的知识。一直在问疯狂的问题,因为我仍然无法完全理解它。我目前正在尝试使用 Underscore图书馆 Backbone Boilerplate制作一个非常简单的模板,允许我传递数据;然后在更新模型时,更改将更改模板的 View 。我相信这是正确的做法,而不是在我的 JS 文件中编写 HTML 代码?如果我错了,请阻止我。
Backbone Boilerplate 有它的模板 .fetch()
我理解的系统。但是,我相信这意味着在我的 JS 中编写 HTML。所以我想使用 Underscore 简单地将信息从模型传递到 View ,再传递到模块以再次渲染模板(或者我可以完全跳过 View ?)。
我的问题是为什么这行不通,我认为这是因为我没有将其更改为 JSON。
我的 HTML 模板:
<div>
<script id="rtemp" type="text/x-underscore-template">
<span><%= title %></span>
</script>
</div>
和 JavaScript:
define([
// Global application context.
"app",
// Third-party libraries.
"backbone",
"underscore",
"json2"
],
function(app, Backbone) {
var Attempt = app.module();
Attempt.Model = Backbone.Model.extend({});
Attempt.Collection = Backbone.Model.extend({});
Attempt.Views.Tutorial = Backbone.View.extend ({
template: "app/templates/attempt",
render: function(done) {
var tmpl = app.fetchTemplate(this.template);
//console.info(tmpl);
this.$el.html(tmpl({title: 'This is a title'}))
}
});
return Attempt;
});
当我检查它显示在 <div>
中的元素时但是它周围仍然有模板脚本标记,因此不会显示在 HTML 页面上。我尝试使用 json2
首先将其转换为 JSON,但这似乎不起作用,除非我做错了什么。 Underscore 是最好用的东西吗?我假设是因为它是 Backbone 依赖项。或者我应该使用其他东西。我只是想避免在我的 JS 中编写 HTML。
最佳答案
如果我没理解错的话,你最终会得到这个 HTML:
<div>
<script id="rtemp" type="text/x-underscore-template">
<span>This is a title</span>
</script>
</div>
根据您正在使用的代码,这是正确的行为,但这显然不是您想要的结果。
<script>
当您将模板嵌入 HTML 页面时,将使用模板包装器。这样做是为了让浏览器不会尝试将您的模板解释为 HTML,并防止浏览器尝试自行呈现它。在这种情况下,您可以像这样将模板嵌入到 HTML 页面中:
<!-- Some HTML stuff... -->
<script id="rtemp" type="text/x-underscore-template">
<span><%= title %></span>
</script>
<!-- Some other HTML stuff... -->
你会像这样使用它:
var t = _.template($('#rtemp').html());
var html = t(...)
$('#rtemp').html()
部分仅提取模板的 <script>
的内容包装所以_.template
只会看到 <span><%= title %></span>
最终处理的模板只是一个简单的 <span>
.例如:http://jsfiddle.net/ambiguous/dzPzC/
在您的情况下,您正在阅读整个 <div><script>...</script></div>
作为模板并将其提供给_.template
.结果是 tmpl({title: 'This is a title'})
仍然包括 <script>
,浏览器不知道如何处理 <script type="text/x-underscore-template">
所以 <span>
您感兴趣的内容根本不会呈现。
您不需要 <script>
包装器,只有在将原始模板嵌入到某些 HTML 中时才需要。您的模板只需要 <script>
的内容:
<span><%= title %></span>
演示:http://jsfiddle.net/ambiguous/QuwSX/
传递给模板函数的参数:
tmpl({ title: '...' })
很好,编译后的模板函数只是想看到一个 JavaScript 对象。人们谈论将其传递给 JSON 并经常使用 toJSON
为模板准备数据的方法,但这是对术语的滥用;模板确实需要一个对象,而从技术上讲,JSON 是一个字符串。
关于backbone.js - 带有 Backbone 样板的下划线模板,正确的做法,或者是否有更好的模板方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11017859/