2

n 個のサブモデルFooのコレクション( と呼びましょう) を含むバックボーン モデル ( と呼びましょう) があり、特定の 1 つのビューでは、これらのサブモデルのうちm 個だけを行に沿ったメッセージと共に表示したいと考えています。 「（nm）残り」の。Bar

今、私が持っているものは次のようなものです：

var FooView = Backbone.View.extend({
    ...
    render: function() {
        this._barViews = [];
        var bars = this.model.get("bars");

        var that = this;
        _.each(bars.first(maxToShow), function(bar) {
            that._barViews.push(new BarView({model:bar}));
        }

        var remaining = bars.length - maxToShow;
        this.model.set("remaining", remaining > 0 ? remaining : undefined;

        var json = this.model.toJSON();
        $(this.el).html(this.template(json));

        _(this._holdViews).each(function(hv) {
            holdList.append($(hv.render().el));
        });
    }
});

これは機能しますが、この特定のビューに固有のものであるにもかかわらず、「remainingMessage」をモデルに注入しているため、ハックに感じます。(別のビューではbars、すべての が表示されるか、まったく表示されないか、残りのメッセージが表示される場合と表示されない場合があります。) 入れ子になったビューについても、完全に満足しているわけではありません。これは、追加のテンプレート ファイルを作成し、忘れずに含める必要があることを意味するためです。それ（FWIW、サーバー側のコンパイルで、テンプレートにHandlebars.jsを使用しています）。

bars(1)コレクションをmaxShownアイテムに絞り込み、(2) ビューに残っている数を生成/含めるためのより良い方法はありますか?

4

1 に答える 1

4

「ビューモデル」が必要です。これは、それを使用する特定のビューに関する懸念を処理するために特別に存在するモデルです。幸いなことに、これは JavaScript では非常に単純です。

を使用Object.createすると、パラメーターとして渡した元のオブジェクトから継承する新しいオブジェクト インスタンスを取得できます。これにより、元のモデルを実際に変更することなく、新しいコードで元のモデルを「装飾」することができます。

あなたの場合、「foo」モデルを残りの情報で装飾したいと考えています。ただし、結果で必要なのはその情報だけなtoJSONので、そのメソッドにのみ追加します。



function buildFooViewModel(model){
  var foovm = Object.create(model);

  foovm.toJSON = function(){
    // call the original model's toJSON
    var args = Array.prototype.slice.apply(arguments);
    var json = model.toJSON.apply(this, args);

    // add the needed "remaining" data using your calculations, here
    json.remaining = bars.length - maxToShow;

    // send the json data back
    return json;
  }

}

var FooView = Backbone.View.extend({

  initialize: function(){
    // use the view model instead of the original
    this.model = buildFooViewModel(this.model);
  },

  render: function(){
    // your normal render stuff here... calling this.model.toJSON
    // will return your JSON data with the `remaining` field in it already
  }

});

私は、このような計算を必要とするビューでこれを頻繁に行います。http://ravenhq.comのいたるところで、たとえばデータベース管理画面で、% used/remaining などの値が表示されます。

于 2013-01-25T22:07:46.137 に答える