5

每当我将新模型添加到我的收藏时，我都会尝试更新我的视图。我的第一个问题是，当我保存该模型时，是否会自动将模型添加到我的收藏中，例如：

PostsApp.Views.Form = Backbone.View.extend({
    template: _.template($('#form-template').html()),
    render: function(){
        this.$el.html(this.template(this.model.toJSON()));
    },
    events:{
        'click button' : 'save'
    },

    save: function(e){
        console.log("is this working");
        e.preventDefault();
        var newname = this.$('input[name=name-input]').val();
        var newadress = this.$('input[name=adress-input]').val();
        this.model.save({name: newname, adress : newadress});
    }


});

还是我还需要做collection.add()

除了在我的视图中查看新模型之外，我正在尝试添加一个像这样的“添加”事件侦听器：

PostsApp.Views.Posts = Backbone.View.extend({
    initialize: function(){
        this.collection.on('add', this.addOne, this);

    },
    render: function(){
        this.collection.forEach(this.addOne, this);
    },

    addOne: function(post){
        var postView = new PostsApp.Views.Post({model:post});
        postView.render();
        this.$el.append(postView.el);
    }
});

这不仅不起作用，而且当我添加初始化方法时，它只会在第一次加载页面时复制模型中的所有内容。

4

1 回答 1

13

不..当您执行 amodel.save时，它只会创建一个僵尸模型（如果它还不是集合的一部分。即如果保存了新模型），它不是任何集合的一部分。

所以你的add 事件不会被集合触发。

如果要触发添加事件，请使用createcollection 方法，然后它将知道必须在哪个集合上添加新模型。

collection.create({model});

然后它会在内部将模型添加到集合中并触发add event

listenTo此外，使用而不是使用附加事件是一个更好的主意on

this.listenTo(this.collection, 'add', this.addOne);

代码

PostsApp.Views.Form = Backbone.View.extend({
    template: _.template($('#form-template').html()),
    render: function () {
        this.$el.html(this.template(this.model.toJSON()));
    },
    events: {
        'click button': 'save'
    },

    save: function (e) {
        console.log("is this working");
        e.preventDefault();
        var newname = this.$('input[name=name-input]').val();
        var newadress = this.$('input[name=adress-input]').val();
        this.collection.create({
            name: newname,
            adress: newadress
        });
    }
});

PostsApp.Views.Posts = Backbone.View.extend({
    initialize: function () {
        this.listenTo(this.collection, 'add', this.addOne);

    },
    render: function () {
        this.collection.forEach(this.addOne, this);
    },

    addOne: function (post) {
        var postView = new PostsApp.Views.Post({
            model: post,
            collection : this.collection
        });
        postView.render();
        this.$el.append(postView.el);
    }
});
于 2013-06-07T20:49:05.423 回答