Backbone Marionette視圖之間的通信

Question

我是一名初級javascript開發人員，在一家使用Backbone和Marionette的公司實習。 我的第一個任務是在一些基於輸入的集合中創建搜索，過濾和排序功能，事情是我得到了2個不同的視圖：一個itemView呈現輸入字段（搜索字段，排序選擇等）和一個collectionView呈現採集。

我有蜜蜂分析骨幹事件聚合器，listenTo方法等，以找到一種方法，使collectionView監聽提交，單擊itemView中的事件，因此它可以相應地呈現自己。例如，當用戶在搜索字段中輸入「青蛙」時，collectionView將顯示包含該條件的模型，如果用戶單擊最後一次修改後的排序選項，那麼collectionView將以這種方式呈現它自己。

任何建議都非常受歡迎。 在此先感謝。

Answer 1

基本上木偶爲你做的一切，你只需要正確初始化收集視圖。

您可以指定哪些子視圖事件的集合視圖應該聽（反正它偵聽默認一些違約事件）

這裏是例子的搜索功能和子視圖事件處理：

HTML

<script id='itemViewTemplate' type = "text/template"> 
    <div class='itemView'><%= title %></div> 
</script> 
<script id='collectionViewTemplate' type = "text/template"> 
    <div class="collectionView"></div> 
</script> 

<input value='' id='search' placeholder='search'> 

的Javascript

// our data to show and filter 
var data = [ 
    {title: "title 1"}, 
    {title: "title 2"}, 
    {title: "title 3"} 
]; 

// item model 
var FooBar = Backbone.Model.extend({ 
    defaults: { 
    title: "" 
    } 
}); 

// collection of items 
var FooBarCollection = Backbone.Collection.extend({ 
    model: FooBar 
}); 

// item view 
var FooView = Marionette.ItemView.extend({ 
    template: "#itemViewTemplate", 

    events: { 
     "click": "_onClick" 
    }, 

    _onClick: function() { 
     this.trigger('click', this); // here we trigger event which will be listened to in collection view 
    } 

}); 

// collection view 
var MyCollectionView = Marionette.CollectionView.extend({ 
    childView: FooView, 
    template: "#collectionViewTemplate", 

    childEvents: { 
     'click': '_onItemClick' // listen to any child events (in this case click, but you can specify any other) 
    }, 

    _onItemClick: function(item) { 
     $('.message').text("item clicked: " + item.model.get("title")); 
     console.log(arguments); // event handler 
    } 
}); 

// init our collection 
var myCollection = new FooBarCollection(data); 
// another collection which will be filtered 
var filterCollection = new FooBarCollection(data); 

// init collection view 
var myCollectionView = new MyCollectionView({ 
    collection: myCollection 
}); 

// render collection view 
$("body").append(myCollectionView.render().$el); 

// search 
$('#search').change(function() { 
    var value = $(this).val(); // get search string 
    var models = filterCollection.where({ 
     title: value 
    }); // find models by search string 

    value ? myCollection.reset(models) : myCollection.reset(filterCollection.models); 
// reset collection with models that fits search string. 
// since marionette collection view listens to all changes of collection 
// it will re-render itself 
// filter collection holds all of our models, and myCollection holds subset of models, you can think of more efficient way of filtering 
}); 
// just to show click event info 
$('body').append("<div class='messageContainer'>Click on item to see its title:<div class='message'></div></div>"); 

木偶集合視圖監聽所有MyCollection的事件，爲的exaple

如果你會寫

myCollection.add({title: 'title 4'}); 

它會自動呈現在集合視圖新ItemView控件。 相同的刪除，重置和其他defaut Backbone.Collection方法（其中觸發事件，和木偶聽他們）;

這裏的jsfiddle：http://jsfiddle.net/hg48uk7s/11/

這裏是提線木偶文檔：

http://marionettejs.com/docs/v2.4.3/marionette.collectionview.html#collectionviews-childevents

我建議開始從beginnig marionnet閱讀文檔，因爲的CollectionView繼承了很多ItemView控件和ItemView控件繼承很多來自View等等，所以你可以知道Collection.View擁有的所有功能。

UPDATE

也許我誤解了一個問題一點，你需要的CollectionView和其他一些視圖（ItemView控件之間的通信在這種情況下，另一種觀點認爲，不是視圖的CollectionView用來渲染它的孩子，這就是我思想）。在這種情況下，這裏是一個更新的小提琴：

http://jsfiddle.net/hg48uk7s/17/

您需要第三個實體的CollectionView和搜索查看之間處理例如通信。通常它有一些控制器，它偵聽searchView事件，然後調用一些處理程序，控制collectionView，它使用搜索值來過濾它自己。