BB Marionette：无需重新渲染即可更新集合的最佳方式

Question

我有一个非常简单的页面，在表格中显示了一个集合。在其上方有一个搜索字段，用户可以在其中输入用户的名字。

当用户键入时我想过滤列表。

编辑：我更新了代码以显示当前的复合视图是如何工作的。我的目标是集成一个可以 _.filter 集合并希望只更新集合表的 searchView。

define([
  'marionette',
  'text!app/views/templates/user/list.html',
  'app/collections/users',
  'app/views/user/row'
],
  function (Marionette, Template, Users, User) {
    "use strict"

    return Backbone.Marionette.CompositeView.extend({
      template: Template,
      itemView: User,
      itemViewContainer: "tbody",
      initialize: function() {
        this.collection = new Users()
        this.collection.fetch()
      }
    })
  })

Answer 1

将您的模板分成几个小模板，这样可以提高客户端的性能，您不会遇到覆盖表单元素的问题，并且您有更多可重用的代码。

但是要注意太多的分离，因为更多的模板意味着更多的视图和更多的代码/逻辑。

Answer 2

您似乎没有充分利用CollectionView。如果我是你，我会将搜索框和搜索结果之间的关注点分开。将它们作为单独的视图，这样当一个需要重新渲染时，它不会影响另一个。

此代码可能无法立即运行，因为我尚未对其进行测试。但希望它能给您一些线索，了解 ItemView、CollectionView 和 Layout 是什么以及它们如何帮助您删除一些样板代码

//one of these will be rendered out for each search result.
var SearchResult = Backbone.Marionette.ItemView.extend({
    template: "#someTemplateRepresentingEachSearchResult"
)};

//This collectionview will render out a SearchResult for every model in it's collection
var SearchResultsView = Backbone.Marionette.CollectionView.extend{
    itemView: SearchResult
});

//This layout will set everything up
var SearchWindow = Backbone.Marionette.Layout.extend({
    template: "#someTemplateWithASearchBoxAndEmptyResultsRegionContainer",
    regions:{
        resultsRegion: "#resultsRegion"
    },
    initialize: function(){
        this.foundUsers = new Users();
        this.allUsers = new Users();
        this.allUsers.fetch({
            //snip...
        });
    events: {
        'keyup #search-users-entry': 'onSearchUsers'
    },
    onSearchUsers: function(e){
        var searchTerm = ($(e.currentTarget).val()).toLowerCase()

        var results = this.allUsers.filter(function(user){
            var firstName = user.attributes.firstname.toLowerCase();
            return firstName.match(new RegExp(searchTerm))
        });

        this.foundUsers.set(results); //the collectionview will update with the collection
    },
    onRender: function(){
        this.resultsRegion.show(new SearchResultsView({
            collection: this.foundUsers
        });
    }
});

我认为您需要注意的最重要的事情是CollectionView 如何利用您提供的Backbone.Collection。 CollectionView 将为它的集合中的每个模型呈现一个 itemView（你给它的类/类型）。如果Collection 发生变化，那么CollectionView 也会发生变化。您会注意到在方法onSearchUsers 中您需要做的就是更新该集合（使用set）。 CollectionView 将监听该集合并相应地更新自己