Question

我有一个Backbone模型（我们称之为Foo），其中包含 n 子模型的集合（让我们称之为Bar），并在一个特定的视图中，我只想显示这些子模型的 m ，以及“（nm）剩余”的消息。

现在，我得到的是这样的：

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作为模板，使用服务器端编译）。

是否有更好的方法（1）将bars集合过滤到maxShown个项目，以及（2）生成/包含视图中剩余的数字？

Answer 1

您需要一个“视图模型” - 专门用于处理将使用它的特定视图的问题的模型。幸运的是，这在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以及其他类似的值。

Backbone集合的特定于视图的修改

1 个答案: