0

通过 Backbone 视图渲染模板时，您通常会得到一些看起来像这样的代码：

ShirtView = {
  template: JST["/templates/shirt_template"],
  el: ".shirt-element"

  render: function() {
    var html = this.template({color: this.model.color, size: this.model.size});
    this.$el.html(html);
  }
}

这一切都很好，您的模板将呈现您想要的属性。但如果this.model.color发生变化，则不会反映在视图中。然后，您可以使用诸如 modelbinder 之类的东西将视图中的元素显式绑定到您的模型，但这意味着向您的视图引入额外的代码。

我想知道是否有任何模板引擎，例如 Mustache 或 Handlebars，可以在模型更改时自动更新属于属性对象中的字段的元素，而无需我在视图中指定它？

4

1 回答 1

0

正如评论所建议的那样，您可以使用几个库...但我想建议您不需要这样做。我在一个由 Backbone 提供支持的站点上工作，该站点有数千行（见鬼，可能是数万或数十万行）代码，而我们使用的只是我们自己的自定义基类。

本质上，您需要做的就是：

var TemplatedView = Backbone.View.extend({
    render: function() {
        this.renderTemplate();
    }.
    renderTemplate: function() {
        this.$el.html(this.template(this.model.toJSON()));
    }
});

然后您可以将任何新视图设为模板视图，只需：

var ShirtView = TemplatedView.extend({
    template: JST["/templates/shirt_template"],
    el: ".shirt-element"
});

或者，如果您有一些自定义渲染逻辑，您只需要调用renderTemplate：

var AdvancedShirtView = TemplatedView.extend({
    template: JST["/templates/shirt_template"],
    el: ".shirt-element",

    render: function() {
        this.model.fold();
        this.renderTemplate();
        this.model.press();
    }
});

现在我们还有一些增强功能（例如，如果有人在我们的一个视图上指定了“rawTemplate”属性，我们renderTemplate会将其编译为适当的模板），但这就是为这样的事情滚动您自己的解决方案的美妙之处：你得到你想要的。

或者您可以使用图书馆 :-) 但就个人而言，对于您的网站既简单又不可或缺的东西，我不明白您为什么要这样做。

于 2013-03-20T18:42:38.870 回答