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); 
     } 
} 

这是我使用的逻辑，它的工作原理。