javascript - 在 Backbone Marionette View 之间进行通信

Question

我是一名初级 javascript 开发人员，在一家使用 Backbone 和 Marionette 的公司实习。我的第一个任务是在基于某些输入的集合中创建搜索、过滤和排序功能，问题是我有两个不同的 View :一个 itemView 呈现输入字段(搜索字段、排序选择等)，而一个 collectionView 呈现集合.

我一直在分析 Backbone 事件聚合器、listenTo 方法等，以找到一种方法使 collectionView 监听 itemView 中的提交、单击事件，以便它可以相应地呈现自身。例如，当用户在搜索字段中输入“frog”时，collectionView 会显示包含该条件的模型，如果用户单击最后修改的排序选项，collectionView 也会以这种方式呈现自己。

任何建议都非常受欢迎。提前致谢。

Answer 1

基本上，Marionette 会为您完成所有操作，您只需要正确初始化 Collection View 即可。

您可以指定 Collection View 应该监听哪些 subview 事件(无论如何，它默认监听一些默认事件)

以下是 subview 的搜索功能和事件处理的示例:

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

例如，Marionette Collection View 监听所有 myCollection 事件

如果你会写

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

它将自动在 Collection View 中渲染新的 itemView。与删除、重置和其他默认 Backbone.Collection 方法相同(触发事件，并且木偶监听它们)；

这是 jsfiddle: http://jsfiddle.net/hg48uk7s/11/

这是有关 marionette 的文档:

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

我建议从头开始阅读marionnet上的文档，因为CollectionView继承了很多ItemView，而ItemView继承了很多View等等，所以你可以知道Collection.View拥有的所有功能。

更新

也许我有点误解了一个问题，你需要在collectionView和其他一些 View 之间进行通信(itemView在这种情况下是另一个 View ，而不是collectionView用来渲染其 subview 的 View ，这就是我的想法)。在这种情况下，这是一个更新的 fiddle :

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

例如，您需要第三个实体来处理 collectionView 和 searchView 之间的通信。通常它是一些 Controller ，它监听 searchView 事件，然后调用一些处理程序，将控制权交给 collectionView，它使用搜索值来过滤自身。