0

「ファセット」または「フィルタリング」インターフェースを実装するシンプルなアプリを構築しています。データの書き込みはありません。ユーザーが左側のファセット（チェックボックス）を選択して、右側の結果セットを減らすようにします。

私は2つの別々のコレクション（ファセットとインセンティブ）を持っています。これらは、2つのアイテムで構成される配列を含む単一のjsonオブジェクトから入力されています。2つの各項目は、ページのこれら2つの部分のモデル、ビュー、およびコレクションの作成に役立ちます。

インセンティブ収集の結果を更新するには、ファセットビューでイベントを取得する必要があります。これら2つを接続するための最良の方法は何ですか。私のテストアプリはここにあります。テンプレートにはハンドルバーを使用しています。

こちらをご覧ください：デモサイト

メインコンテンツエリアは、このような「車のインセンティブ」で構成されています。

//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

何の質問！実際には多くの質問が1つに！

まったく同じタスクを実行するために使用しているロジックと、実際に機能するロジックを説明できます (こちらを参照)

基本的に、ファセットのコレクションとアイテムのコレクションの 2 つのコレクションが必要です。

ファセットのコレクション 最初は空です (ファセットが選択されていません)。いずれかをオンにすると、ファセット コレクションに追加されます。ファセットを追加するときは、何らかの方法でアイテムのコレクションをフィルタリングします (アイテムのコレクションによってリッスンされるイベントをトリガーするか、より良いの は、アイテム コレクション オブジェクトで定義されたメソッドであるitemCollection.facet_filter()where is のようなメソッドを呼び出すことです)。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 に答える