javascript - 模型属性未统一命名的 Backbone 集合和模板

Question

我有 4 个模型，每个模型都有不同 属性。例如，一个可能看起来像 {total: 4}，另一个可能是 {change: .5}。这些模型将以相同的格式显示，即它们在渲染 HTML 时看起来是一样的。我想知道这是否适合使用集合并为每个模型创建相同的 View 。我很困惑，因为为每个 View 使用相同的模板是理想的，但在一个模板中，我必须显示 <%= total %> 和 <%= change %> 等属性。我认为检查模板中的模型是不正确的，所以我想知道我是否应该为每个模型制作一个新模板(即使模板中唯一的区别是属性的名称)，或者我应该重命名每个模型中的模型属性，以便它们都匹配。这是一些代码，希望足以理解这个问题。

var Chart = Backbone.Model.extend({ initialize: function() { console.log('please work')}});
chart1 = new Chart({title: 'total', total: 123});
chart2 = new Chart({title: 'change', difference: '20%'});

var ChartView = Backbone.View.extend({
className: "chart-container",
template: $("#chartTemplate").html(),

render: function () {
    var tmpl = _.template(this.template);

    this.$el.html(tmpl(this.model.toJSON()));
    return this;
}
});

var Charts = Backbone.Collection.extend({ model: Chart});
var myCharts = new Charts([chart1, chart2]);

var MasterView = Backbone.View.extend({
el: $("#charts"),

initialize: function () {
    this.collection = myCharts;
    this.render();
},

render: function () {
    var that = this;
    _.each(this.collection.models, function (model) {
        that.renderChart(model);
    }, this);
},

renderChart: function (model) {
    var chartView = new ChartView({
        model: model
    });
    this.$el.append(chartView.render().el);
}
});

模板:

<script id="contactTemplate" type="text/template">
<h1> <%= title%></h1>
<p> <%= total? difference? %></p>
</script>

我们将不胜感激关于解决此问题的最佳方法的一些见解!

Answer 1

使用 BackboneJS 时，您不必明确地将集合绑定(bind)到模板。不过，您可以做的是创建一个更通用的模板，然后传入您要呈现的值。

浏览器

var myView = Backbone.View.extend({
  el: $('#myElement'),
  render: function(text) {
    this.$el.html("<p>My Text: "+text+"</p>");
    return this;
  }
});

然后，当您调用渲染方法时，只需传递要渲染的文本即可。这样一来，无论您使用哪个模型或集合都没有关系，只需传递必要的即可。

编辑

好的，看看你的代码，我现在明白你的意思了。我相信拥有具有不同属性的相同模型不是一个好习惯。 Backbone 模型旨在反射(reflect)服务器端模型的模型。不要在两个模型之间使用不同的属性，而是找到将定义两个值的两个属性名称。

这就是我的意思:http://jsfiddle.net/4cYhh/

请注意，现在只有两个通用属性:名称和值，而不是“总计”属性和“差异”属性。当然，这是假设您不会再添加任何彼此不同的属性。

希望这是有道理的。让我知道是否需要澄清。