Question

我有一个index.html，看起来像这样 -

    <div id="header">
         <div id="form"></div>
    </div>   

    <div><ul id="admin_list"></ul></div>

主干标头视图定义如下 -

      var headerView = Backbone.View.extend({

        el: "#header", 
        initialize: function(){
            this.render(); 
        },
        events: {
            "click #save": "save_form"
        },
        save_form: function(){
             this.model.save();
             return false;   
        }, 
        render: function(){
             var template = _.template($("#tmpl_form").html()); 
             $(this.el).html(template);
        }
    });

管理员列表的视图如下 -

     var adminView = Backbone.View.extend({
        el: "#admin_list", 
        initialize: function(){
            this.render();
            this.model.bind("add", this.render, this);
        },
        render: function(){
            $(this.el).html("<li>New Model Added</li>");
        }
     });

最后，我创建了headerView和adminView

的实例

      var header_View =  new headerView();
      header_View.render();

我的问题是，当我保存模型时，admin_list没有使用新的li项目“New Model Added”刷新。我认为，this.model.bind("add", this.render, this)没有被召唤。

请有人对此有所了解！

干杯！

Answer 1

在上面的代码中，您不是创建管理视图，而是仅创建管理视图标题视图。此外，您需要将集合传递给视图：

var header_View =  new headerView({collection: your_list});
var admin_View =  new adminView({collection: your_list});

Answer 2

模型的add事件只有在添加到集合中时才会触发。如果您只是保存模型并希望在服务器上成功保留后重新呈现adminView，我相信您需要添加自己的事件，例如：

myModel = Backbone.Model.extend({
    save: function(attrs, options) {
        options || (options = {});
        var success = options.success || null;
        var model = this;
        options.success = function(model, resp) {
            model.trigger('saved', model);
            if (success) success(model, resp);
        };
        Backbone.Model.prototype.save.apply(this, arguments);
    }
});

然后在adminView.initialize中，绑定到“已保存”而不是“添加”。

根据model.bind，不刷新骨干视图

2 个答案: