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();
    }
});

現在、それ以上にいくつかの拡張機能があります (たとえば、誰かがビューの 1 つで "rawTemplate" プロパティを指定した場合renderTemplate、適切なテンプレートにコンパイルします) が、それは次のようなものに対して独自のソリューションを展開することの美しさです:あなたはまさにあなたが望むものを手に入れます。

または、ライブラリを使用することもできます :-) しかし、個人的には、非常にシンプルでサイトに不可欠なものについて、なぜそうしたいのかわかりません。

于 2013-03-20T18:42:38.870 に答える