渲染问题

时间:2011-04-30 14:20:19

标签: backbone.js

来自骨干文档:

  

所有视图始终都有一个DOM元素(el属性),无论它们是否已经插入到页面中。

我有以下非常简单的javascript文件:

CBBItem = Backbone.Model.extend(
{
});

CBBTrackItem = Backbone.View.extend(
{
    template: _.template("<span><%= title %></span>"),

    initialize: function()
    {
    _.bindAll(this, "render");
    },

    render: function()
    {
    $(this.el).html(this.template(this.model.toJSON()));
    return this;
    }
});

这样的html页面:

 <script type="text/javascript">
 $(function()
 {
    var itm1 = new CBBItem({ title: 'track 1'});
    var itmUI1 = new CBBTrackItem({ model: itm1, id: "kzl" });
    itmUI1.render();
 });
 </script>

<body>
    <div id="kzl"></div>
</body>

虽然页面上有创建的div,但我的视图项目不想渲染。我可以通过多种方式欺骗局势。例如,做这样的事情

var itm1 = new CBBItem({ title: 'track 1'});
var itmUI1 = new CBBTrackItem({ model: itm1, id: "big_kzl" });
$(itmUI1.render().el).appendTo("#kzl");

但是,为什么主要案例不起作用?

3 个答案:

答案 0 :(得分:1)

这是一种可能性:您没有为视图设置el,因此它不知道如何处理模板。你能修改你的视图调用代码看起来像这样吗?

var itmUI1 = new CBBTrackItem({
    model: itm1,
    id: "big_kz1",
    el: "#kz1"
});
itmUT1.render();

或者,如果值永远不变,您可以在视图的初始化中设置el值。这样做的好处是视图的调用者不必知道这些信息,因此视图更加独立。

答案 1 :(得分:1)

如果文档已经具有要用作特定视图的el的元素,则必须在初始化视图时手动将该dom元素设置为el属性。 Backbone没有为您提供快捷方式。

答案 2 :(得分:0)

我在构建期间传递ID和事件等值时遇到了问题,而不是在扩展期间定义它们。您可能需要检查并查看这是否是您正在寻找的差异。