事件視圖之間處理

確定我有像在此PIC的佈局：事件視圖之間處理

MessageListView

：

Layout

在屏幕的上部的表通過由

define(['backbone','collections/messages','views/message'], function(Backbone, MessageCollection, MessageView) { 
    var MessageListView = Backbone.View.extend({ 
     el: '#messagesContainer', 
     initialize: function() { 

      this.collection = new MessageCollection(); 
      this.collection.fetch({reset:true}); 
      this.listenTo(this.collection, 'reset', this.render); 

      this.table = this.$el.find("table tbody"); 
      this.render(); 
     }, 
     render: function() { 
      this.collection.each(function(message, index) {     
       this.renderMessage(message, index); 
      }, this); 
     }, 
     renderMessage: function(message, index) { 
      var view = new MessageView({ 
       model:message, 
       className: (index % 2 == 0) ? "even" : "odd"  
      }); 
      this.table.append(view.render().el); 
     } 
    }); 
    return MessageListView; 
});

MessageView

define(['backbone','models/message'], function(Backbone, MessageCollection, MessageView) { 
    var MessageView = Backbone.View.extend({ 
     template: _.template($("#messageTemplate").html()), 
     render: function() { 
      this.setElement(this.template(this.model.toJSON()));   
      return this; 
     }, 
     events:{ 
      'click':'select' 
     }, 
     select: function() { 
      // WHAT TO DO HERE? 
     } 
    }); 
    return MessageView; 
});

APPVIEW

define(['backbone','views/messages'], function(Backbone, MessageList) { 
    var App = Backbone.View.extend({ 
     initialize: function() { 
      new MessageList(); 
     } 
    }); 
    return App; 
});

我很快就會在屏幕的下方添加一個新的視圖（也許「PreviewView」）。

我想在用戶單擊某行時在「PreviewView」內發生某些事情。

例如，在PreviewView中顯示其他模型的屬性（例如細節）可能很有趣。

最佳做法是什麼？

在每個MessageView中持有對PreviewView的引用嗎？
在選擇方法內觸發事件，並在預覽視圖中使用（）進行監聽。
在我的模型中使用瞬態「選定」屬性，並使PreviewView收聽「更改」事件？

謝謝，如果你需要更多的細節請告訴我，我會編輯的問題。

來源

2013-07-11 Fabio B.

不確定最佳實踐，但我發現這個解決方案並不重要。我創建了一個全球性的消息對象，公交車，不管：

window.App = {}; 
window.App.vent = _.extend({}, Backbone.Events);

您必須先註冊PreviewView先前創建的事件總線上的「觸發」功能（根據你的榜樣，這應該是在PreviewView）：

initialize: function() { 
    App.vent.on('PreviewView.show', this.show, this); 
}

現在您應該可以通過調用：App.vent.trigger從應用程序中的任何位置觸發任何已註冊的事件。例如，當一個行的用戶點擊，你將有類似的東西：

App.vent.trigger('PreviewView.show');

的情況下，如果你有來發送和已觸發事件使用沿着對象：

App.vent.trigger('PreviewView.show', data);

來源

2013-07-11 09:41:34

確定，但怎麼樣傳遞所選模型。 PreviewView如何知道集合上的哪個模型被選中？也許我可以將模型本身傳遞給事件總線？ –

當然，觸發器也接受參數：App.vent.trigger（'PreviewView。show'，model）; –

在您看來，保持應用程序視圖（頂層一）不知道底層視圖正在做什麼，並使用事件聚合器，因爲您建議保持所有視圖解耦....是更好還是讓集合和所有東西應用程序視圖？ –

事件視圖之間處理

回答

相關問題