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

当用户使用class

.photo\u container

单击属于视图

PhotoListView

一部分的

div

时，将触发一个函数

sendSelectedPhotoId

。此函数必须从属于该视图的

div.photo\u container

元素的

photo

模型中获取属性

photo\u id

，并通过

fetch（）

将其发送到服务器端

问题：到目前为止，我设法在单击

div

时触发函数

sendSelectedPhotoId

，但我不知道如何获取视图的

photo

模型的

photo\u id

属性。我应该如何做到这一点

另外，我不确定是否会发送正确的

photo\u id

代码

$('#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

中，在那里我成功地获得了模型的属性，但我不知道如何在

PhotoList

集合执行fetch（）时触发

reset

事件

查看

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('');
        }});
    }


});

问题：这样，在执行函数

sendSelectedPhotoId

中的

fetch（）

之后，我似乎无法触发模型的

reset

事件，这意味着我无法使用

PhotoListView

的

render（）

重新渲染

在Chrome的javascript控制台下面的屏幕截图中，我在

sendSelectedPhotoId

执行

fetch（）

后打印出了集合，看起来被提取的人将新数据添加到了现有模型中，而不是创建2个新模型并删除所有现有模型

---

每个模型都有子视图，因此我将在子视图中放置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或模型上的自定义方法

根据作者的评论更新，显示博客中的样本库

我不会听从那个博客的建议。如果你是专业地使用主干网，我不能推荐足够的

• 一件正在进行的工作50美元，每一分钱都值
• 它有一个简单的示例应用程序，展示了如何组织主干应用程序。这就是我买这本书的原因
• 它在后端的示例中使用了Rails，但我使用了Rails、Node和C#MVC，所有这些都可以正常工作

---

您好，谢谢您的回复，您的意思是我第二次尝试时像更新后的原始帖子一样吗？在函数

sendSelectedPhotoId

中执行

fetch（）

之后，我似乎无法触发模型的

reset

事件，这意味着我无法使用

PhotoListView

的

render（）

重新渲染。感谢书中的建议，我不使用Ruby on Rails，而是使用PHP。。。希望有一个类似的PHP后端。注意到他们的网页上说我需要适应ROR。当你实际包装一个集合时，为什么要在

PhotoListView

中使用

this.model

？您应该使用

newphotolistview（{collection:…}）

和

this.collection

以避免混淆。是的，我同意mu的观点，在您的代码中有一些约定没有被遵循，这使得遵循起来有点混淆。谢谢，我将更改它。我从中学到了什么，看看路由器代码

this.wineListView=newwinelistview（{model:this.wineList}）