Невозможно сослаться на модель Backbone после model.set в представлении Backbone

Я пытаюсь заставить представление самостоятельно отображать, привязывая событие изменения к модели представлений. Я создал пользовательскую функцию на PageView, которая берет модель из коллекции Pages в качестве параметра и использует this.model.set(data) для запуска события изменения модели. Это срабатывает, когда я передаю ему модель страницы из коллекции страниц в AppView через this.page.load(Pages.at(index)). Однако я столкнулся с некоторыми проблемами.

  1. Событие изменения запускается только один раз при переключении между двумя разными моделями, что я могу решить, запустив this.model.clear({silent:true}), но это не идеально.
  2. this.model всегда не определена в любой функции, кроме функции load() в PageView, что действительно является основной проблемой, потому что я, очевидно, не могу запустить this.render, если модель не определена. Отсюда и тест:функция().

Во всяком случае, вот код для моих функций AppView и PageView. Заранее благодарю за любую помощь.

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

person James Parker    schedule 10.07.2012    source источник


Ответы (1)


исправит ли установка контекста в вашем вызове привязки что-то для вас?

initialize:function(){
    this.model.bind('change',this.test, this);
},
person lecstor    schedule 11.07.2012
comment
Спасибо, это позволило мне ссылаться на модель в других функциях. Однако у меня все еще есть проблема с this.model.set(data). Я не думаю, что полностью понимаю, как модель работает в представлении. В первый раз, когда я запускаю this.model.set(data), он работает и запускает тестовую функцию, но если я переключаюсь обратно на предыдущую модель, он больше не запускает событие изменения. Любые идеи? - person James Parker; 11.07.2012
comment
Я думал обо всем этом неправильно. this.model.set() на самом деле ссылается на модель, с которой я инициализировал представление, и изменяет ее данные, что, в свою очередь, изменяет данные в коллекции, поэтому, когда я переключался туда и обратно, это фактически меняло данные в коллекции как Что ж. - person James Parker; 11.07.2012