Question

我是一名初级javascript开发人员，在使用Backbone和Marionette的公司实习。我的第一个任务是根据一些输入在集合中创建搜索，过滤和排序功能，事情是我有2个不同的视图：一个itemView呈现输入字段（搜索字段，排序选择等）和collectionView呈现集合

我正在分析骨干事件聚合器，listenTo方法等，以找到一种方法使collectionView监听提交，点击itemView中的事件，以便它可以相应地渲染自己。例如，当用户输入＆＃34; frog＆＃34;在搜索字段中，collectionView显示包含该条件的模型，如果用户单击最后修改的排序选项，则collectionView将以此方式呈现。

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

Answer 1

基本上Marionette为您做了一切，您只需要正确初始化集合视图。

您可以指定集合视图应该侦听哪些子视图事件（默认情况下它会侦听某些默认事件）

以下是子视图的搜索功能和事件处理示例：

<强> 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集合视图会侦听所有myCollection事件，例如

如果你要写

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

它将自动在集合视图中呈现新的itemView。删除，重置和其他defaut Backbone.Collection方法（触发事件，marionette监听它们）相同;

这是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所具有的所有功能。

<强>更新

也许我误解了一个问题，你需要在collectionView和其他一些视图之间进行通信（在这种情况下，itemView是另一个视图，而不是视图collectionView用来渲染它的子节点，这就是我的想法）。在这种情况下，这是一个更新的小提琴：

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

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

在Backbone Marionette视图之间进行通信

1 个答案: