Backbone.js需要幫助連接視圖事件與其他視圖

Question

我正在構建一個簡單的應用程序，實現「faceting」或「過濾」接口 - 沒有數據寫入。我希望用戶選擇左側的構面（複選框）以減少右側的結果集。

我有2個獨立的集合（方面和激勵）。這些正從一個包含2個項目的數組的單個json對象填充。每兩個項目有助於爲頁面的這兩個部分創建模型，視圖和集合。

我需要在方面視圖中獲取事件以更新激勵集合的結果。將這兩者連接在一起的最佳方式是什麼？我的測試應用程序可以在這裏找到。我正在使用Handlebars模板。

看到它在這裏：DEMO SITE

主要內容的區域由「汽車激勵」像這樣的。

//define Incentive model 
var Incentive = Backbone.Model.extend({ 
    defaults: { 
     photo: "car.png" 
    } 
}); 

//define individual incentive view 
var IncentiveView = Backbone.View.extend({ 
    tagName: "article", 
    className: "incentive-container", 
    template: Handlebars.compile($("#incentive-template").html()), 

    initialize: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
     return this; 
    } 

}); 

//define Incentives collection 
var Incentives = Backbone.Collection.extend({ 
    model: Incentive, 
    url: 'data/incentives3.json', 
    parse: function(response) { 
     return response.incentiveHolder; 
    } 
}); 

var IncentivesView = Backbone.View.extend({ 
    el: $(".incentives-container"), 

    initialize: function() { 
     this.collection = new Incentives(); 


     // When the contents of the collection are set, render the view. 
     this.collection.on('reset', function() { 
      incentives = this.collection.models; 
      this.render(); 
     }, this); 

     this.collection.fetch(); 
     this.collection.on("reset", this.render, this); 
    }, 

    render: function() { 
     this.$el.find("article") 
      .remove(); 

     _.each(this.collection.models, function(item) { 
      this.renderIncentive(item); 
     }, this); 
    }, 

    renderIncentive: function(item) { 
     var incentiveView = new IncentiveView({ 
      model: item 
     }); 
     this.$el.append(incentiveView.render() 
      .el); 
    } 

}); 

該面模型/集合詳述如下。您可以在FacetView中看到 - 當用戶選擇複選框時，我註冊了「更改」事件。我需要一些如何使用這些數據來1）隱藏每個不包含此facet值的激勵或2）從FacetCollection（??）中刪除模型。我希望用戶能夠快速切換這些複選框開啓/關閉一堆 - 刪除/添加較慢（或效率較低），然後隱藏/顯示與CSS？您可以從我的displayIncentives（）函數中看到「this」 - 是視圖的一個實例 - 但是如何訪問剛剛單擊的複選框的「值」？

如果我能得到這個值 - 那麼我可以檢查激勵集合，遍歷每個項目 - 並要求它是「激勵」數組「包含」這個剛剛點擊的複選框的值。如果返回false，我會隱藏（或刪除？）該項目並繼續。

// ====================================== 
// FACETS 
// ====================================== 

//define Facet model 
var Facet = Backbone.Model.extend({}); 

//define individual facet view 
var FacetView = Backbone.View.extend({ 
    tagName: "div", 
    className: "facet-group", 
    template: Handlebars.compile($("#facets-template").html()), 

    initialize: function() { 
     this.$el.html(this.template(this.model.toJSON())); 
     return this; 
    }, 

    events: { 
     "change input[type=checkbox]": "displayIncentives" 
    }, 

    displayIncentives: function() { 
     console.log(this); 
    } 

}); 

//define Facets collection 
var Facets = Backbone.Collection.extend({ 
    model: Facet, 
    url: 'data/incentives3.json', 
    parse: function(response) { 
     return response.facetsHolder; 
    } 
}); 

var FacetsView = Backbone.View.extend({ 
    el: $(".facets-container"), 

    initialize: function() { 
     this.collection = new Facets(); 

     // When the contents of the collection are set, render the view. 
     this.collection.on('reset', function() { 
      this.render(); 
     }, this); 

     this.collection.fetch(); 
    }, 

    render: function() { 
     _.each(this.collection.models, function(item) { 
      this.renderFacet(item); 
     }, this); 
    }, 

    renderFacet: function(item) { 
     var facetView = new FacetView({ 
      model: item 
     }); 
     this.$el.append(facetView.render().el); 
    } 

}); 

最後 - 我的JSON對象就設在這裏......我此刻的自由，以幫助設計這個對象是如何在這個項目的下一階段結構。任何建議不勝感激。

json object

Answer 1

什麼問題！其中一個問題其實很多！

我可以告訴你我使用的執行完全相同的任務中的邏輯，以及實際工作（見here）

基本上，你必須有2個類別：面的集合，和項目的集合。

方面的集合 在開始時它是空的（沒有方面選擇）。當你選中一個，然後將它添加到facet集合中。當添加一個方面時，你以某種方式過濾項目集合（你可以通過項目集合觸發一個事件listend，或者 - 更好 - 只需調用一個方法，如itemCollection.facet_filter()，其中facet_filter()是你在項目集合對象中定義的方法） 。

好。

收集項目 這是一個普通的集合。您只需添加一個facet_filter()方法來過濾列表並觸發重置事件。該重置事件由FacetsView收聽，其重新呈現列表。

facet_filter()方法應該是這樣的。

filter_results: function(facets){ 
    var filteredColletion= new Backbone.Collection(this.models); 
    _.each(facets,function(facet){ 
     filteredColletion.where({facet.key: facet.value}); 
      }); 
    this.reset(returnList); 
     } 
} 

這是我使用的邏輯，它的工作原理。