0

我正在构建一个实现“分面”或“过滤”接口的简单应用程序——没有数据写入。我希望用户选择左侧的构面（复选框）以减少右侧的结果集。

我有 2 个单独的集合（方面和激励）。这些是从一个包含由 2 个项目组成的数组的单个 json 对象填充的。每 2 个项目有助于为页面的这两个部分创建模型、视图和集合。

我需要在方面视图中获取事件以更新激励收集的结果。将这两者连接在一起的最佳方法是什么。我的测试应用可以在这里找到。我正在使用 Handlebars 进行模板化。

在这里看到它：演示站点

主要内容区域是由这样的“汽车激励”组成的。

//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) 隐藏不包含此方面值的每个激励或 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对象

4

1 回答 1

1

这是什么问题！其实很多问题合二为一！

我可以告诉你我用来执行完全相同任务的逻辑，并且它确实有效（见这里）

您基本上必须有 2 个集合：一个方面的集合和一个项目的集合。

刻面的集合 一开始它是空的（没有选择刻面）。当您选中一个时，您将其添加到构面集合中。添加构面时，您可以以某种方式过滤项目集合（您可以触发项目集合侦听的事件，或者 - 更好的是 - 只需调用一个方法，例如 您在项目集合对象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);
        }
}

这是我使用的逻辑并且它有效。

于 2012-10-11T08:04:50.530 回答