Question

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

当用户输入我要过滤列表时。

编辑：我已更新代码以显示当前的CompositeView如何工作。我的目标是集成一个可以_.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将收听该集合并相应地更新自己

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

2 个答案: