25

私はテンプレートを幅広く使用しており、完全に含まれているテンプレートを使用するのが好きです。つまり、次のように、ルート要素を含むすべての DOM 要素をテンプレートコードで確認したいということです。

<script type="text/template" id="template-card">
  <div class="card box" id="card-<%= id %>">
    <h2><%= title %></h2>
    <div><%= name %></div>
  </div>
</script>

しかし、Backbone が気に入っているのは、次のようなテンプレートです。

<script type="text/template" id="template-card">
  <h2><%= title %></h2>
  <div><%= name %></div>
</script>

そして、JS コードでルート要素とその属性を定義します。私が思うことは醜くて混乱しています。

では、Backbone View がテンプレートを追加の DOM 要素でラップするのを回避する良い方法はありますか?

私はこの問題のスレッドをチェックしています: https://github.com/documentcloud/backbone/issues/546そして、それを行う公式の方法がないことを理解しています..しかし、非公式の方法をお勧めできるかもしれません.

4

3 に答える 3

42

を利用view.setElementして完全なテンプレートをレンダリングし、それをビュー要素として使用できます。

setElement view.setElement(element)
バックボーン ビューを別の DOM 要素に適用する場合は、setElement を使用します。これにより、キャッシュされた $el 参照も作成され、ビューの委任イベントが古い要素から新しい要素に移動されます。

あなたが説明しなければならない2つのポイント：

  1. setElementビューイベントを処理しますundelegateEventsが、自分で設定した可能性のある他のすべてのイベントを慎重に削除してください。
  2. setElement要素をDOMに挿入しないため、自分で処理する必要があります。

つまり、ビューは次のようになります

var FullTemplateView = Backbone.View.extend({

    render: function () {
        var html, $oldel = this.$el, $newel;

        html = /**however you build your html : by a template, hardcoded, ... **/;
        $newel = $(html);

        // rebind and replace the element in the view
        this.setElement($newel);

        // reinject the element in the DOM
        $oldel.replaceWith($newel);

        return this;
    }
});

そしてhttp://jsfiddle.net/gNBLV/7/で遊ぶ実例

于 2012-07-22T07:41:00.377 に答える
0

ビューのtagNameを関数として定義し、次のようなクラスを作成することもできます。

var MyView = Backbone.View.extend({
   template: '#my-template',
   tagName: function() {
     // inspect the template to retrieve the tag name
   },
   render: function() {
     // render the template and append its contents to the current element
   }
});

これが実際の例です

于 2015-08-20T10:11:49.597 に答える