2

テンプレートを使用して最初にビューをレンダリングしようとしていますが、ドキュメントの一部である場合は、後続の呼び出しでビューを更新します。

私のアプリのページは少し似ています

<body>
  <!-- ... -->
  <div id="view_placeholder"/>
  <!-- ... -->
</body>

そして、擬似コードで私はそのようなことをしたい

Backbone.View.extend({
  // ...
  render: function() {
    if (this.el *IS NOT A CHILD OF document*) {
      // render the contents from the template
    } else {
      // update the content visibility based on the model
    }
  },
  // ...
});

これは、テンプレートに非常に多くのノードが含まれており、変更のたびにテンプレートを再生成することは現実的ではないためです。

rivets.jsなど、いくつかのデータバインディングライブラリを調べましたが、template：modelの関係にはあまり適合していません。

私が気づいたことの1つはthis.el.parentNode==null、ドキュメントに追加する前に、これが決定的なテストであるかどうかはわかりません。いずれにせよ、このビューを別のビューでラップすると、そのテストの有用性が低下します（または、別のビューのel内で一度のように、過度に注意して、とにかくサブテンプレートをレンダリングしました。

私が見ることができる別のオプションは、レンダリングされたステータスを追跡するためにフィールドを使用することです。

Backbone.View.extend({
  //
  templateRendered:false,
  // ...
  render: function() {
    if (!this.templateRendered) {
      // render the contents from the template
      this.templateRendered = true;
    } else {
      // update the content visibility based on the model
    }
  },
  // ...
});

しかし、それは私にはハッキーだと感じます。

だから私の質問は：

テンプレートを完全にレンダリングしたため、再レンダリングする（そしてすべてのサブビューを再挿入する）のではなく、レンダリングされたテンプレートを微調整するだけでよいという事実を追跡するための最良の方法は何ですか？

4

2 に答える 2

1

慣用的なバックボーンアプローチはrender()、フルレンダリングが必要な場合にのみビューでフルを呼び出し、モデル変更イベントバインディングを使用して、ビューのより小さな部分をレンダリングするサブレンダリング関数を呼び出すことだと思います。

var AddressView = Backbone.View.extend({
    initialize: function (options) {
        Backbone.view.prototype.initialize.call(this, options);
        _.bindAll(this)
        options.model.on('change:name', this.renderName);
        options.model.on('change:street', this.renderStreet);
        options.model.on('change:zipCode', this.renderZipCode);
    },
    renderName: function (model) {
        this.$el.find("#name").text(model.get("name"));
    },
    renderZipCode: function (model) {
        this.$el.find("#zipcode").text(model.get("zipCode"));
    },
    renderStreet: function (model) {
        this.$el.find("#stree").text(model.get("street"));
    },
    render: function () {
        //Populate this.el with initial template, subviews, etc
        //assume this.template is a template function that can render the main HTML
        this.$el.html(this.template(model));
        this.renderName(this.model);
        this.renderZipCode(this.model);
        this.renderStreet(this.model);
        return this;
    }
});

上記のようなコードは間違いなく退屈です。個人的にはknockback.jsまたはrivets.jsを再考しますが、上記のパターンは標準的なバニラバックボーン.jsアプローチであると思います。

于 2012-10-31T14:08:42.537 に答える
0

要素が挿入されるまで、ビューのレンダリングは避けます。いずれの場合も、ビューの要素の親を確認することで確認できます。

 this.$el.parent()

this.$elがドキュメントの一部でない場合は、空にする必要があります。

于 2012-10-31T18:59:49.240 に答える