backbone和$ el元素

我正在尝试开发我的第一个骨干应用程序。所有似乎都没问题，但是当我渲染视图并在$el上附加了一些html时，页面中没有任何内容呈现。完成其余服务调用，Backbone.Router.extend在$(document).ready(function() {});内声明以确保创建DOM。调试我的javascript，el元素得到包含在属性中的正确值，但是当整个页面被渲染时，这个值不会出现在页面中。

¿我在做什么错？

我的视图代码：

window.ProductsListView = Backbone.View.extend({ 

    id: 'tblProducts', 
    tagName: 'div', 

    initialize: function (options) { 
    this.model.on('reset', this.render, this); 
    }, 

    render: function() { 
    // save a reference to the view object 
    var self = this; 

    // instantiate and render children 
    this.model.each(function (item) { 
     var itemView = new ProductListItemView({ model: item }); 
     var elValue = itemView.render().el; 
     self.$el.append(elValue); // Here: the $el innerHTML is ok, but in the page it disappear. The id of element is div#tblProducts, so the element seems correct 
    }); 

    return this; 
    } 
}); 

window.ProductListItemView = Backbone.View.extend({ 

    tagName: 'div', 

    template: _.template(
     '<%= title %>' 
    ), 

    initialize: function (options) { 

    this.model.on('change', this.render, this); 
    this.model.on('reset', this.render, this); 
    this.model.on('destroy', this.close, this); 
    }, 

    render: function() { 
    $(this.el).html(this.template(this.model.toJSON())); 
    // $(this.el).html('aaaaaa'); // This neither works: it's not a template problem 

    return this; 
    }, 

    close: function() { 
    $(this.el).unbind(); 
    $(this.el).remove(); 
    } 
});

在这里，我加载产品（内部Backbone.Router.extend）。这是正确执行：

this.productsList = new ProductsCollection(); 
this.productsListView = new ProductsListView({ model: this.productsList }); 
this.productsList.fetch();

这是HTML元素我想渲染：认为如果中存在的el提前与酒店

<div id="tblProducts"> 
</div>

感谢，

来源

2013-03-06 Raúl Truco

你可以用简化的问题创建一个jsfiddle吗？这将大大帮助你.. – 2013-03-06 08:19:24

我没有得到上传的重置服务，所以我的代码只能在我的开发机器上工作。下次我会更好地做好准备。谢谢。 – 2013-03-06 09:24:56

从您发布的代码中，实际上并没有将您的ProductsListView插入到DOM中，或者将它附加到现有的DOM元素。

我想看看它是你有两种意见的方式：

那些动态生成基于从服务器
那些已经存在于页面上返回的数据

通常在列表的情况下，列表已经存在于页面上，并且它的项目是动态添加的。我已将您的代码在this jsfiddle中略微重构。您将看到ProductListView与现有的ul绑定，并且ProductItemView在添加到集合时被动态添加。

Updated jsfiddle to demonstrate Collection.reset

来源

2013-03-06 08:46:38 juco

但是如果我想从其他服务中获取数据集合，而不是逐个添加元素。我以为我不得不订阅“重置”事件，并在渲染做一个collection.each。我试图模拟使用productCollection.reset（...）没有运气。 jsfiddle：[链接]（http://jsfiddle.net/raultruco/zJAnu/3/） – 2013-03-06 09:23:11

你非常接近！我已经分叉并修改了你的小提琴以显示不同之处[这里]（http://jsfiddle.net/AJjmd/）。请注意，'ProductListView'所捕获的重置事件来自'ProductCollection'，而不是'Product'。 – juco 2013-03-06 09:33:08

它不适合我...没有看到区别（只有集合命名，而不是模型）。感谢@juco – 2013-03-06 10:03:19

它是否被渲染。你不能说它在那里没问题，因为如果没有元素被传递（空div），Backbone将创建一个元素。

如果你想渲染视图，你应该确定什么是元素的容器？你有一个HTML你想附加视图？

尝试通过调用一个el像

this.productsListView = new ProductsListView({ model: this.productsList, el : $("#container") });

当然你也可以创建视图，并将其附加到DOM后视图传递一个容器元素：

el: $("#someElementID") //grab an existing element 
el.append(view.render().el);

你的观点不会存在直到你把它附着在某个地方。

来源

2013-03-06 08:36:11 pfried

谢谢，我明白了。谈论将元素添加到DOM的时间。你更喜欢哪一个1）将el传递给view并呈现它自己，或者2）稍后使用$（“＃someContainerID”）。append（view.render（）。el）添加？ – 2013-03-10 19:18:41

backbone和$ el元素

回答

相关问题