用戶搜索動態過濾牽引木偶集合模型

Question

我正在嘗試學習骨幹牽線木偶js並使用此框架開發小型應用程序。

作爲應用程序的一部分，我顯示覆合集合視圖中的用戶列表，其中模式包含名稱作爲唯一屬性。現在我想添加一個搜索按鈕。當用戶在搜索框中輸入字符串時，我想要在關鍵字上動態地過濾名稱。如果他清除了文本，我應該重置。

我試圖尋找事件觸發和聆聽。但不能在我的情況下完全代碼。

有人可以指導我如何聽事件。 SearchBox不在此模板中。是否有可能從外部視聽事件並執行過濾等操作。

下面是我的骨架模型和集合視圖：

AttachmentModel = Backbone.Model.extend({ 
    defaults: { 
     name : "DefaultName" 
    } 
}); 

//collection definition 
AttachmentCollectionModel = Backbone.Collection.extend({ 
    model : AttachmentModel 
}); 

//View definition 
AttachmentView = Backbone.Marionette.ItemView.extend({ 
    template : "#attachment-item-template", 
    tagName : 'li' 
}); 

//Collection view definition 
AttachmentCollectionView = Backbone.Marionette.CompositeView.extend({ 
    tagName : "ul", 
    className : "list", 
    template : "#attachment-collection-template", 
    itemView : AttachmentView 
}); 

//Adding region 
MyApp.addRegions({ 
    attachmentsDisplayContainer : "#attachmentsDisplayContainer" 
}); 

//Adding initializer 
MyApp.addInitializer(function(options){ 
    var attachmentCollectionView = new AttachmentCollectionView({ 
     collection : options.attachmentCollectionModels 
    }); 
    MyApp.attachmentsDisplayContainer.show(attachmentCollectionView);  
}); 

Answer 1

我有木偶沒有經驗，但在你的情況下，我將創建一個搜索查看，將控制搜索事件。該SearchView將持有對AttachmentCollectionView的引用，並且對於每個keyEvent都會調用方法search(name)或類似方法。我認爲在視圖模板之外綁定事件不是一個好主意。

//SearchView 

SearchView = Backbone.View.extend({ 
    events: { 
     "onkeyup .searchField: filterResult" 
    }, 
    initialize: function(options){ 
     this.attachmentCollectionView = options.attachmentCollectionView; 
    }, 
    filterResult: function(e) { 
     this.attachmentCollectionView.searchResult(); 
    } 
}); 

AttachmentCollectionView = Backbone.Marionette.CompositeView.extend({ 
    tagName : "ul", 
    className : "list", 
    template : "#attachment-collection-template", 
    itemView : AttachmentView, 

    searchResult: function(name){ 
     //Filter your list view and update your view 
    } 
}); 

//Adding initializer 
MyApp.addInitializer(function(options){ 
    var attachmentCollectionView = new AttachmentCollectionView({ 
     collection : options.attachmentCollectionModels 
    }); 
    var searchView = new SearchView({ 
     attachmentCollectionView = attachmentCollectionView 
    }); 

    MyApp.attachmentsDisplayContainer.show(attachmentCollectionView);  

    searchView.render(); 
});