gpt4 book ai didi

javascript - 如何在没有包装器的情况下将 Backbone.View.el 绑定(bind)到模板?

转载 作者:行者123 更新时间:2023-11-28 01:32:14 26 4
gpt4 key购买 nike

这是我正在使用的模板

<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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com