Javascript 主干木偶视图之间的通信

我是一名初级javascript开发人员，在一家使用主干网和木偶的公司实习。 我的第一个任务是基于一些输入在集合中创建搜索、过滤和排序功能，问题是我得到了两个不同的视图：一个itemView呈现输入字段（搜索字段、排序选择等），一个collectionView呈现集合

我已经分析了主干事件聚合器、listenTo方法等，以找到一种使collectionView侦听submit的方法，单击itemView中的事件，以便它可以相应地呈现自己。例如，当用户在搜索字段中输入“frog”时，collectionView将显示包含该条件的模型，如果用户单击上次修改的排序选项，collectionView将以这种方式呈现自身

任何建议都是非常受欢迎的。

---

提前感谢。

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

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

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

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'>

它将自动在集合视图中呈现新的itemView。 对于移除、重置和其他defaut主干。收集方法（触发事件，木偶监听事件）也是如此

以下是JSFIDLE：

这是关于木偶的文件：

我建议从一开始就开始阅读marionnet上的文档，因为CollectionView从ItemView继承了很多内容，ItemView从View继承了很多内容，诸如此类，所以您可以了解Collection的所有功能

更新

也许我有点误解了一个问题，您需要collectionView和其他视图之间的通信（在本例中，itemView是另一个视图，而不是collectionView用于渲染其子视图的视图，这就是我的想法）。在这种情况下，这里有一个更新的小提琴：

---

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

基本上，木偶为您做所有事情，您只需正确初始化collection view

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

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

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'>

它将自动在集合视图中呈现新的itemView。 对于移除、重置和其他defaut主干。收集方法（触发事件，木偶监听事件）也是如此

以下是JSFIDLE：

这是关于木偶的文件：

我建议从一开始就开始阅读marionnet上的文档，因为CollectionView从ItemView继承了很多内容，ItemView从View继承了很多内容，诸如此类，所以您可以了解Collection的所有功能

更新

也许我有点误解了一个问题，您需要collectionView和其他视图之间的通信（在本例中，itemView是另一个视图，而不是collectionView用于渲染其子视图的视图，这就是我的想法）。在这种情况下，这里有一个更新的小提琴：

---

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

事实上，在阅读了您的第一次响应后，我以为您不明白我必须处理不同视图之间的通信。你上次的更新让我更清楚了。再次感谢。事实上，在阅读了你的第一次回复后，我认为你没有意识到我必须处理不同观点之间的交流。你上次的更新让我更清楚了。再次感谢。

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