Javascript 为什么我在点击时得到用户的所有模型而不是点击一次的模型?
单击集合中的一个模型时,我会在该用户的控制台中获取所有模型,而不是单击的模型。有人能帮我吗 App.js 在App.js中,将模型发送到另一个视图,为每个模型创建唯一的视图Javascript 为什么我在点击时得到用户的所有模型而不是点击一次的模型?,javascript,backbone.js,Javascript,Backbone.js,单击集合中的一个模型时,我会在该用户的控制台中获取所有模型,而不是单击的模型。有人能帮我吗 App.js 在App.js中,将模型发送到另一个视图,为每个模型创建唯一的视图 var App = Backbone.View.extend({ initialize: function() { this.collection = new Documents(); console.log("this.collection init",
var App = Backbone.View.extend({
initialize: function()
{
this.collection = new Documents();
console.log("this.collection init", this.collection);
this.listenTo(this.collection, 'add', this.render);
this.listenTo(this.collection, 'sync', this.renderSidebarModels);
},
renderSidebarModels: function()
{
console.log("renderSidebarModels SYNC", this.collection);
for(var i=0; i<this.collection.length; i++)
{
console.log(this.collection.models);
this.sidebar = new SidebarView({model: this.collection.models[i]});
}
},
$( document ).ready(function() {
console.log( "ready!" );
var app = new App();
});
您的方法不是初始化模型视图的最干净的方法,因为您不是初始化每个模型的一个视图,而是将视图指定给模型的方法是遍历模型集合,并将每个集合项指定给特定视图。这种方法很麻烦,会影响性能,还会导致在视图中编写大量额外的代码 最好的方法是每个模型使用一个视图,这意味着我们集合中的每个模型都有自己的视图对象来呈现该模式的数据。不过,这并不意味着需要一个视图对象来迭代集合并填充列表。它仅将每个单独模型的实现向下移动到该模型的视图中。通过这种方法,每个视图都直接引用其模型 大概是这样的:
var App = Backbone.View.extend({
initialize: function() {
this.collection = new Documents();
console.log("this.collection init", this.collection);
this.listenTo(this.collection, 'add', this.render);
this.listenTo(this.collection, 'sync', this.renderSidebarModels);
},
renderSidebarModels: function(item) {
this.collection.models.each(function(item) {
var sidebarView = new DealerView({
model : item
}, this);
sidebarView.render();
_this.$el.append(sidebarView.$el);
});
}
});
使用您的方法获取单击项的一种方法是在适当的位置使用数据属性:
open: function(e){
e.preventDefault();
var id = $(e.currentTarget).data("id");
var item = this.collection.get(id);
console.log(item);
},
但是正如我所说的,这个解决方案不是最好的,我们不得不根据模型的id来查找模型
阅读本文以获得更好的理解:您的方法不是初始化模型视图的最干净的方法,因为您不是初始化每个模型的一个视图,而是将视图分配给模型的方法是遍历模型集合,并将每个集合项分配给特定视图。这种方法很麻烦,会影响性能,还会导致在视图中编写大量额外的代码 最好的方法是每个模型使用一个视图,这意味着我们集合中的每个模型都有自己的视图对象来呈现该模式的数据。不过,这并不意味着需要一个视图对象来迭代集合并填充列表。它仅将每个单独模型的实现向下移动到该模型的视图中。通过这种方法,每个视图都直接引用其模型 大概是这样的:
var App = Backbone.View.extend({
initialize: function() {
this.collection = new Documents();
console.log("this.collection init", this.collection);
this.listenTo(this.collection, 'add', this.render);
this.listenTo(this.collection, 'sync', this.renderSidebarModels);
},
renderSidebarModels: function(item) {
this.collection.models.each(function(item) {
var sidebarView = new DealerView({
model : item
}, this);
sidebarView.render();
_this.$el.append(sidebarView.$el);
});
}
});
使用您的方法获取单击项的一种方法是在适当的位置使用数据属性:
open: function(e){
e.preventDefault();
var id = $(e.currentTarget).data("id");
var item = this.collection.get(id);
console.log(item);
},
但是正如我所说的,这个解决方案不是最好的,我们不得不根据模型的id来查找模型
阅读本文以便更好地理解:您忘记在您的
每个中初始化。您最好使用this.collection.each(函数(项){…},this)
无论如何。它对我没有帮助:(@lorenos什么没有帮助?我只给了你一个想法,这并不意味着,提供的代码本身就应该工作。除非我们对代码没有一个完整的概述,否则很难提供一个完整的工作代码。你忘了在你的每个中初始化。你最好使用这个.collection.each(函数(项){…},这个)
无论如何,它对我没有帮助:(@lorenos什么没有帮助?我只给了你一个想法,它并不意味着,提供的代码本身应该工作。除非我们对代码没有一个完整的概述,否则很难提供一个完整的工作代码。当你el:this.$(“#侧边栏”)时,this
是什么
?无论如何,你最好不要做那种事情,让每个视图创建/拥有/销毁自己的el
,然后让调用者将el
放在它拥有的容器中;另外,由于事件的唯一性,你最好避免事件的id选择器。如果你做了这两件事,你会有更少的事件问题。什么是t他
当你
el:this.$(“#侧边栏”)
?无论如何,最好不要做那种事情,让每个视图创建/拥有/销毁自己的el
,然后让调用者将el
放在它拥有的容器中;另外,由于事件的唯一性,最好避免事件的id选择器。如果你做这两件事,事件问题就会少一些。