单击视图时从View的模型中获取属性（backbone.js）

Question

当用户点击div，其中.photo_container类是视图PhotoListView的一部分时，会触发一个函数sendSelectedPhotoId。此函数必须从属于此视图的photo_id模型中获取属性Photo，该视图的div .photo_container元素已被点击，并通过fetch()将其发送到服务器端。< / p>

问题：到目前为止，我设法在单击sendSelectedPhotoId时触发函数div，但我无法弄清楚如何获取{{1视图的photo_id模型的属性。我该怎么做到这一点？

另一方面，我不确定是否会发送正确的Photo。

代码

photo_id

型号＆amp;集合

$('#button').click( function() {

    // Retrieve photos
    this.photoList = new PhotoCollection();
    var self = this;
    this.photoList.fetch({
        success: function() {
            self.photoListView = new PhotoListView({ model: self.photoList });
            $('#photo_list').html(self.photoListView.render().el);
        }
    });
});

视图

// Models
Photo = Backbone.Model.extend({
    defaults: {
        photo_id: ''
    }
});

// Collections
PhotoCollection = Backbone.Collection.extend({
    model: Photo,
    url: 'splash/process_profiling_img'
});

第二次尝试

我还尝试将事件处理程序和// Views PhotoListView = Backbone.View.extend({ tagName: 'div', events: { 'click .photo_container': 'sendSelectedPhotoId' }, initialize: function() { this.model.bind('reset', this.render, this); this.model.bind('add', function(photo) { $(this.el).append(new PhotoListItemView({ model: photo }).render().el); }, this); }, render: function() { _.each(this.model.models, function(photo) { $(this.el).append(new PhotoListItemView({ model: photo }).render().el); }, this); return this; }, sendSelectedPhotoId: function() { var self = this; console.log(self.model.get('photo_id')); self.model.fetch({ data: { chosen_photo: self.model.get('photo_id')}, processData: true, success: function() { }}); } }); PhotoListItemView = Backbone.View.extend({ tagName: 'div', className: 'photo_box', template: _.template($('#tpl-PhotoListItemView').html()), initialize: function() { this.model.bind('change', this.render, this); this.model.bind('destroy', this.close, this); }, render: function() { $(this.el).html(this.template( this.model.toJSON() )); return this; }, close: function() { $(this.el).unbind(); $(this.el).remove(); } }); 放在我设法正确获取模型属性的sendSelectedPhotoId中，但我无法弄清楚如何触发PhotoListItemView事件当reset集合执行fetch（）时。

查看

PhotoList

问题：有了这个，我似乎无法在函数PhotoListItemView = Backbone.View.extend({ tagName: 'div', className: 'photo_box', events: { 'click .photo_container': 'sendSelectedPhotoId' }, template: _.template($('#tpl-PhotoListItemView').html()), initialize: function() { this.model.bind('change', this.render, this); this.model.bind('destroy', this.close, this); }, render: function() { $(this.el).html(this.template( this.model.toJSON() )); return this; }, close: function() { $(this.el).unbind(); $(this.el).remove(); }, sendSelectedPhotoId: function() { console.log('clicked!'); var self = this; console.log(self.model.get('photo_id')); self.model.fetch({ data: { chosen_photo: self.model.get('photo_id')}, processData: true, success: function() { $(this.el).html(''); }}); } }); 中执行reset之后触发模型的fetch()事件，这意味着我无法让它使用sendSelectedPhotoId的{​​{1}}重新渲染。

在Chrome的javascript控制台下面的屏幕截图中，我在PhotoListView完成render()之后打印出了该集合，似乎已将提取新数据添加到了现有模型，而不是创建2个新模型并删除所有现有模型！

Answer 1

您已经拥有每个模型的子视图，因此我将click事件处理程序放在子视图中。在子进程中的处理程序中，触发传递this.model的事件，并在父进程中侦听该事件。

根据更新进行更新：

尝试更改

this.model.bind('reset', this.render, this); to 
this.model.bind('remove', this.render, this);  // model is a collection right?

然后在单击视图后从集合中删除模型。另外，我不认为使用Model.fetch是你真正想做的事情。也许在模型上使用.save或自定义方法？

根据作者的评论更新，显示来自博客的示例库

我不会遵循该博客的建议。如果你专业地使用骨干我不能推荐Thoughtbot ebook。

• 正在进行的工作是50美元，值得每一分钱
• 它有一个简单的示例应用程序，用于说明如何组织骨干应用程序。这就是我买这本书的原因。
• 它在后端的示例中使用Rails，但我使用了Rails，Node和C＃MVC，所有工作都没有问题。