0

当用户单击作为视图一部分的divwith 类时，将触发一个函数。该函数必须从属于该视图的模型中获取属性，该模型的元素已被单击，并将其通过 发送到服务器端。.photo_containerPhotoListViewsendSelectedPhotoIdphoto_idPhotodiv .photo_containerfetch()

问题：到目前为止，我设法在单击sendSelectedPhotoId时触发了该功能div，但我不知道如何获取视图模型的photo_id属性。Photo我应该如何实现这一目标？

在旁注中，我不确定是否photo_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我设法正确获取模型属性的位置，但我无法弄清楚当集合执行 fetch()时如何触发reset事件。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('');
        }});
    }


});

问题：有了这个，我似乎无法在执行in 函数reset后触发模型的事件，这意味着我无法使用's重新渲染它。fetch()sendSelectedPhotoIdPhotoListViewrender()

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

在此处输入图像描述

4

1 回答 1

0

您已经为每个模型提供了子视图，因此我会将 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 电子书。

  • 正在进行中的工作需要 50 美元，而且每一分钱都值得
  • 它有一个简单的示例应用程序，展示了如何组织主干应用程序。这就是我买这本书的原因。
  • 它在后端的示例中使用 Rails，但我使用了 Rails、Node 和 C# MVC，并且所有工作都没有问题。
于 2012-06-24T18:24:23.933 回答