模型属性未统一命名的主干集合和模板答案

【问题标题】：Backbone collection and templates where models properties are not uniformly named模型属性未统一命名的主干集合和模板
【发布时间】：2013-11-17 03:34:28
【问题描述】：

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

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>

非常感谢您对解决此问题的最佳方法的一些见解！

【问题讨论】：

您不必将model.toJSON() 传递给模板函数，您可以将toJSON() 转换成不同的形式...
你能详细说明一下吗？我不确定我是否理解。（对于主干来说还是很新的）
也许你正在尝试做的一个更完整的例子会让我们更容易谈论。
好的，我发布了一些代码，希望能解决这个问题。还有 mu，我的滑雪板伙伴，感谢您解答我所有的骨干问题 =) 非常感谢。
我认为依赖的 EDIT 方法是有道理的。您需要在某个地方规范化属性。如果你想使用一个集合，那么你应该在模型中对它们进行规范化，这样集合才有意义；如果您不需要集合，那么您可以使用某种适配器（可能是模型上的一种方法）让视图知道模型中调用了哪些内容，然后视图可以映射内容以匹配模板。跨度>

标签： javascript templates backbone.js view model

【解决方案1】：

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

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

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

编辑

好的，看看你的代码，我现在明白你来自哪里了。我认为具有不同属性的相同模型不是一个好习惯。骨干模型旨在反映服务器端模型的模型。不要在两个模型之间使用不同的属性，而是找到两个定义两个值的属性名称。

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

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

希望这是有道理的。如果我需要澄清，请告诉我。

【讨论】：

在那种情况下，我不需要为 4 个不同的模型提供 4 个不同的视图吗？理想情况下，我想重用视图和模板。
您需要为模型上的事件设置回调。例如，您将设置一个“更新”方法，以便在模型上发生同步时调用。在该更新方法中，您将调用此特定渲染。因为您在每个模型中都设置了此回调，所以您会知道要传递给渲染的属性。

【解决方案2】：

拥有一个模板，并在模型中引入序列化函数，将模型数据序列化为模板可以理解的内容。然后改变

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

到

 this.$el.html(tmpl(this.model.serialize()));

这不是什么新鲜事，我记得 Backbone Layoutmanager 中使用了这种模式。

【讨论】：