2012-06-08 3 views
0

Я пытался научиться магистрали.Магистральный вид MVC не обновляется при синхронизации

Я создал набор моделей, каждый из которых имеет свой собственный вид, который должен отображаться каждый раз, когда модель синхронизируется с сервером. Сервер отправляет идентификатор модели. Кажется, что рендеринг до ID модели установлен. Если вы посмотрите на вывод console.log(), я распечатаю идентификатор модели непосредственно перед ее отображением. Я также распечатываю каждое событие, когда это происходит. Я получаю:

undefined (model id) 
add 
change:id 
change (not sure what changes here?) 
sync 

Кроме того, у меня есть это изменить имя атрибута в модели после 2 сек пауза model.save('name', 'New Name') а. Это вызывает другое событие синхронизации, , но представление не обновляется.

Вот рабочий код: http://jsfiddle.net/flackend/brB7y/1/

Или посмотреть здесь:

var game_library; 

(function($) { 

    _.templateSettings = { 
     interpolate: /\{(.+?)\}/g 
    };  

    var GameModel = Backbone.Model.extend({ 
     url: '/gh/gist/response.json/2895708/', 
     name: undefined, 
     initialize: function() { 

      // Create a view for this model 
      this.view = new GameView({model: this}); 

      // Sync model with server 
      this.save(); 

      // Bind events 
      this.on('sync', this.view.render()); 
      this.on('all', this.console); 
     }, 
     console: function(event, model, changes) { 

      console.log('['+ ++this.i +']-------------(event[:attr], model, changes)----------------'); 
      console.log(event); 
      console.log(model); 
      console.log(changes); 
     }, 
     i: 0 
    }); 

    var GameCollection = Backbone.Collection.extend({ 
     model: GameModel 
    }); 

    var GameView = Backbone.View.extend({ 
     el: $('#holder'), 
     template: $('#game-template').html(), 
     render: function() { 

      var template = _.template(this.template); 
      console.log(this.model.id); 
      this.$el.html(template(this.model.toJSON())); 
     } 
    }); 

    // Instantiate new game collection 
    game_library = new GameCollection; 

    // Add a game 
    // Note: can only pass in 1 ID from gist, so only add 1 game. 
    var games = [ 
     new GameModel({name: 'Skyrim'}) 
    ]; 

    // Note: `game_library.add(new GameModel({name: 'Skyrim'}));` does 
    // not work for some reason having to do with instances... 
    game_library.add(games); 

    // 2 sec later... 
    window.setTimeout(function() { 

     game_library.get(1).save('name', 'The Elder Scrolls V: Skyrim'); 
    }, 2000); 
})(jQuery); 

Спасибо за любую помощь !!

ответ

1

Обновлено сутью на http://jsfiddle.net/brB7y/2/. Я переместил ваш вызов обновления на локальную функцию, которая работает. Я не уверен в технических причинах этого, но это то, как я использовал его раньше.

+0

Спасибо! Я хотел бы выяснить, почему он должен быть местным. Может быть, что-то делать с этим? –

+0

Да, я думаю, это так с прицелом. Методы обработки событий регистрируются на объекте. Таким образом, обратный вызов должен быть доступен на объекте, который зарегистрирован. – codemonkey

2

Снять скобки там:

// Bind events 
this.on('sync', this.view.render/*()*/); 
this.on('all', this.console); 
+0

Спасибо за помощь! –

Смежные вопросы