Backbone Change Event won't update View

Question

Does anyone have any thoughts on why this darn view won't update when performing a .set on the model? I think if might have to do with the render functionality I've put in...

Backbone View:

    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;
        };
    }


});

Backbone Router:

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

You have some accidental globals. In particular, you have this in your view's initialize:

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

and then the render looks at panelonesetting. There is no var on that panelonesetting so it is a global variable.

The initialize method is called when you construct your view and it is never called again; that means that panelonesetting will be assigned the initial panel_one value and then it is never updated. So, if the model is changed, your render will be called but it will be looking at the original panel_one setting. The result is that nothing seems to change: you can call your render as many times as you want with whatever model changes you want and you'll never see anything happen.

You should be checking the value of panel_one inside your render method:

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;
}

Your preflist andpaneloneview` variables in your router are also global when they should almost certainly be local.