主干更改事件不会更新视图

Question

有没有人知道为什么在模型上执行 .set 时这个该死的视图不会更新？我认为这可能与我放入的渲染功能有关......

主干视图：

    App.Views.PanelOne = Backbone.View.extend({


    initialize: function() {
        console.log("View PanelOne Initialized");

        panelonesetting = this.model.get('panel_one');
        console.log( panelonesetting );

        _.bindAll(this, 'render');
        this.model.bind('change', this.render);

    },

    render: function(){
        if ( panelonesetting == "poolprice" ){
            this.$el.html(JST['dashboard/poolprice']({}));
        return this;
        };
        if ( panelonesetting == "none" ){
            this.$el.html(JST['dashboard/none']({}));
        return this;
        };
        if ( panelonesetting == "noconnection" ){
            this.$el.html(JST['dashboard/noconnection']({}));
        return this;
        };
    }


});

骨干路由器：

App.Routers.Dashboard = Backbone.Router.extend({

    routes: {
        ""          : "index"       
        },

    initialize: function(options) {
    console.log("Router initialized");
      preflist = new App.Models.PrefList({});

    preflist.fetch({
        success: function() {
            console.log( preflist );
          paneloneview = new App.Views.PanelOne({ model: preflist });
          $('#panelone').html(paneloneview.render().$el);             
        }  
    });
  },

    index: function() {

    }


});

Answer 1

你有一些意外的全局变量。特别是，您在视图的initialize 中有这个：

panelonesetting = this.model.get('panel_one');

然后render 查看panelonesetting。 panelonesetting 上没有 var，所以它是一个全局变量。

initialize 方法在您构建视图时被调用，并且不再被调用；这意味着panelonesetting 将被分配初始panel_one 值，然后它永远不会更新。因此，如果模型更改，您的 render 将被调用，但它会查看原始的 panel_one 设置。结果是似乎什么都没有改变：您可以根据需要多次调用render，并根据需要更改模型，而您将永远看不到任何事情发生。

您应该在 render 方法中检查 panel_one 的值：

initialize: function() {
    _.bindAll(this, 'render');
    this.model.bind('change', this.render);
},

render: function(){
    var panelonesetting = this.model.get('panel_one');
    if(panelonesetting == "poolprice")
        this.$el.html(JST['dashboard/poolprice']({}));
    if(panelonesetting == "none")
        this.$el.html(JST['dashboard/none']({}));
    if(panelonesetting == "noconnection")
        this.$el.html(JST['dashboard/noconnection']({}));
    return this;
}

您的路由器中的 preflist andpaneloneview` 变量也是全局的，而它们几乎肯定应该是本地的。