这是我正在使用的模板
<script type="text/template" id="template-message">
<p class="message"><%= message %></p>
</script>
这是我的 Backbone.View
var MessageView = Backbone.View.extend({
template: _.template(Backbone.$("#template-message").html()),
render: function() {
this.$el.html(this.template(this.model.attributes));
return this;
},
});
我如何使用它
var msg = new Message({message: "hello"}),
view = new MessageView({model: msg});
$("body").append(view.render().el);
输出
<body>
<div>
<p class="message">
hello
</p>
</div>
</body>
我明白为什么会发生这种情况( View 的默认 tagName 是 div)，但我不希望包装器 div 打开那里。我希望将其视为输出
<body>
<p class="message">
hello
</p>
</body>
我知道我可以这样认为
var MessageView = Backbone.View.exntend({
tagName: "p",
className: "message",
// ...
});
最终用户将定义模板，因此我不希望在 Backbone.View 源代码中指定这些内容。
如何获得所需的输出并将 View 绑定(bind)到 html？
最佳答案
感谢 @Gohn67 的评论，我才得以实现此功能
var MessageView = Backbone.View.extend({
template: _.template(Backbone.$("#template-message").html()),
initialize: function() {
this.setElement(this.template(this.model.attributes));
}
});
如果我们看一下Backbone Source Code ，我们可以看到它 setElement 做了我们希望它做的一切
// backbone source code
setElement: function(element, delegate) {
if (this.$el) this.undelegateEvents();
this.$el = element instanceof Backbone.$ ? element : Backbone.$(element);
this.el = this.$el[0];
if (delegate !== false) this.delegateEvents();
return this;
},
它甚至处理事件委托(delegate)。酷!
<小时/>我最近不得不在 jQuery 1.3.2 上实现这个。 恶心，我知道，但这是一个简单的修复。
唯一改变的部分是setElement位
initialize: function() {
this.setElement(
$( this.template(this.model.attributes) )
);
}
template 结果必须包含在 $() 中才能工作。我知道，考虑到 Backbone 已经尝试自动执行此操作，这没有多大意义。不过，这是我唯一能做的让它与 jQuery 1.3.2 一起工作。
关于javascript - 如何在没有包装器的情况下将 Backbone.View.el 绑定(bind)到模板？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21983004/