0

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

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

编辑：我更新了代码以显示当前的复合视图是如何工作的。我的目标是集成一个可以 _.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()
      }
    })
  })
4

2 回答 2

2

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

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

于 2013-09-02T20:42:48.043 回答
0

你似乎没有充分利用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收听该集合并相应地更新自身

于 2013-09-03T09:02:17.200 回答