BackboneJS + RequireJS允許視圖使用全局事件分派器對集合進行操作

Question

更新：問題已解決，案例已關閉。

---

我仍然有問題讓我的代碼的一部分工作。

我的看法，現在聽來收集更新，什麼應該發生的是：

• 的ListView監聽結果集
• 結果同步
• ListView控件創建爲每個結果
• 的ItemView控件ListView控件（UL）各追加ItemView控件（LI）

一切似乎都做工精細，直到最後一步。

ListView中的作用是應該添加的結果列表不能訪問到ListView的元素。

我可以創建一個ItemView，並檢索它的元素「<li>」，但ListView的「<ul>」不能在函數內引用。

從樣品的ListView碼位：

el: $('.result-list'), 

initialize: function() { 
    this.listenTo(this.collection, 'add', this.addOne); 
}, 

addOne: function(result) { 
    view = new ItemView({ model: result }); 
    this.$el.append(view.render().el); 
}, 

在上面的代碼中，變量視圖存在一樣，它的元件，但「這」不是指到ListView了。下面

---

問題解決

我試圖完成是有一個查看模塊（搜索）能夠在集合（結果）觸發事件。

當搜索查看提交，就應該輸入字段傳遞到收集的提取方法來從服務器檢索結果。目前，我可以從View中觸發一個函數，但該函數無法訪問任何Collection的方法。

以前，我讓View/Collection直接通過它們的變量名來引用對方。
由於我已將代碼分離爲模塊，View/Collection無法直接訪問對方。

下面是一些代碼：（寫成的CoffeeScript）

app.coffee - global_dispatcher應用於骨幹

define [ 
    'jquery' 
    'underscore' 
    'backbone' 
    'cs!router' 
], ($, _, Backbone, Router) -> 
    # global_dispatcher added to all Backbone Collection, Model, View and Router classes 
    dispatcher = _.extend {}, Backbone.Events, cid: 'dispatcher' 
    _.each [ Backbone.Collection::, Backbone.Model::, Backbone.View::, Backbone.Router:: ], (proto) -> 
     _.extend proto, global_dispatcher: dispatcher 

    new Router() 

router.coffee - 這是我遇到麻煩。 'getResults'的功能被觸發，但是集合'results'無法從這裏訪問。

define [ 
    'backbone' 
    'cs!views/resuls/list' 
    'cs!views/results/search' 
    'cs!collections/results' 
], (Backbone, ListView, SearchView, Results) -> 
    Backbone.Router.extend 
     routes: 
      # URL routes 
      '': 'index' 

     index: -> 
      results = new Results 
      new ListView { model: results } 
      new SearchView 

      @global_dispatcher.bind 'getResults', (data) -> 
       console.log results 

搜索。咖啡 - 查看哪個觸發事件，它會成功觸發事件並傳遞正確的參數。

define [ 
    'jquery' 
    'backbone' 
], ($, Backbone) -> 
    Backbone.View.extend 
     events: 
      'submit #search-form': 'submit' 

     submit: (evt) -> 
      evt.preventDefault() 

      phrase = @.$('input').val() 
      @.$('input').val('') 

      args = name: phrase 

      @global_dispatcher.trigger 'getResults', args 

Answer 1

如果我正確理解您的問題，這不難解決。下面是一些僞代碼來說明：

var Results = Backbone.Collection.extend(); 
var Search = Backbone.View.extend({ 
    someEventHandler: function() { 
     // The next line accesses the collection from the view 
     this.collection.fetch(); 
    } 
}); 
var results = new Results(); 
var search = new Search({collection: results}); 

如果你希望你的觀點做一些事情，結果回來後，只要綁定的集合的事件處理程序：

var Search = Backbone.View.extend({ 
    fetchResposne: function() { /* do something*/}, 
    someEventHandler: function() { 
     // The next line accesses the collection from the view 
     this.collection.on('sync', this.fetchResponse); 
     this.collection.fetch(); 
    } 
});