Question

通过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发生变化，那么它就不会反映在视图中。然后，您可以使用类似于模型绑定器的方法将视图中的元素显式绑定到模型，但这意味着在视图中引入额外的代码。

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

Answer 1

正如评论所暗示的那样，您可以使用几个库...但我想建议您不需要。我在一个支持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();
    }
});

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

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

将模型属性绑定到视图的模板引擎？

1 个答案: