Question

I’m trying to get the view to self render by binding a change event to the views model. I’ve created a custom function on PageView which takes a model from the Pages collection as a paramater and uses this.model.set(data) to trigger the model change event. This is triggered when I pass it a Page model from the Pages collection in the AppView via this.page.load(Pages.at(index)). I’m running into a few problems though.

1. The change event is only fired once when switching back and forth between 2 different models, which I can resolve by running this.model.clear({silent:true}), but that’s not ideal.
2. this.model is always undefined in any function other than the load() function within PageView which is really the main issue because I obviously can’t fire this.render if the model is undefined. Hence the test:function().

Anyway here’s the code for my AppView and PageView functions. Thanks in advance for any help.

 define([
      // These are path alias that we configured in our bootstrap
      'jquery',
      'underscore',
      'backbone',
      'handlebars',
      'views/pageView',
      'views/menuView',
       'collections/pages'
    ], function($, _, Backbone, Handlebars,PageView,MenuView,Pages){
        var AppView = Backbone.View.extend({

            //Stores a reference to our main menu
            mainMenu:{},

            //Stores reference to current page
            page:{},

            //The parent div
            el:'#app',

            //Events that are being listened to on #app
            events:{"click"     : "active"},

            //Process to run when this view is initialized
            initialize:function(){

                //Load our Pages Collection
                Pages.reset(this.model.pages);

                //Load the main menu
                this.mainMenu = new MenuView;
                this.mainMenu.model = this.model.main_menu;
                this.mainMenu.render();

                //Loads the page view
                this.page = new PageView({model:Pages.at(0)});
            },

            //Currently just renders a page view with a designated model from the Pages collection
            render:function(index){
                this.page.load(Pages.at(index));
            },

            active:function(event){
              $('.menu a').removeClass('active');
              $('.menu a[href="' + event.target.hash + '"]').addClass('active');
            }

        });
      return AppView;
      // What we return here will be used by other modules
    });



            define([
          // These are path alias that we configured in our bootstrap
          'jquery',
          'underscore',
          'backbone',
          'handlebars',
          'text!templates/page.html',
        ], function($, _, Backbone, Handlebars, pageViewTemplate){
            var PageView = Backbone.View.extend({

                //Define the default template
                template: Handlebars.compile(pageViewTemplate),

                //The parent div for this element
                el:'#content',

                initialize:function(){
                    this.model.bind('change',this.test);
                },
                load:function(data){
                    this.model.set(data);       
                },
                //Render function
                render:function(){
                    this.$el.html(this.template(this.model.toJSON()));
                    return this;
                },
                test:function(){
                    console.log(this.model);
                    console.log('change');
                }
            });
          return PageView;
          // What we return here will be used by other modules
        });

Answer 1

does setting the context in your bind call fix things for you?

initialize:function(){
    this.model.bind('change',this.test, this);
},