0

バックボーン アプリhttp://arturadib.com/hello-backbonejs/docs/5.htmlのこの "hello world" の例では、作成者はテンプレートを次のようにインラインでレンダリングします。

render: function(){
      $(this.el).html('<span style="color:black;">'+this.model.get('part1')+' '+this.model.get('part2')+'</span> &nbsp; &nbsp; <span class="swap" style="font-family:sans-serif; color:blue; cursor:pointer;">[swap]</span> <span class="delete" style="cursor:pointer; color:red; font-family:sans-serif;">[delete]</span>');
      return this; // for chainable calls, like .render().el
    },

これは機能しますが、少し扱いに​​くい html 連結です。

アンダースコアのテンプレート機能を使用して、他のバックボーン アプリの作成者がビューにテンプレートを設定するのを見てきました。

template: _.template($('#my-template').html()),

そして、htmlの代わりにレンダリングします

$(this.el).html(this.template(this.model.toJSON()));

Hello World アプリでこの手法を試してみたかったのですが、テンプレート ファイルを作成したときに、厳密には html ではないという問題に遭遇しました。お気づきのように、関数を呼び出します

 this.model.get('part2')

モデルとして使用していたテンプレート (別の作成者のアプリから、以下を参照) には html が含まれていました。

質問、同じテンプレート ファイルに javascript と html を含めて、モデルを呼び出すにはどうすればよいですか?

<script type="text/template" id="item-template">
      <div class="company">
        <div class="display">
          <span class="company-text"></span>
          <span class="company-mood">
            <span class="mood"></span>
          </span>
          <span class="company-destroy"></span>
        </div>
        <div class="edit">
          <input class="company-input" type="text" value="" />
        </div>
      </div>
    </script>
4

1 に答える 1

2

達成したいことの詳細については、このリンクUnderscore Templateを参照してください。

しかし、一般に、単に補間したいだけならthis.model.get('someAttr');、これをテンプレートに含めるだけで済みます。

// Since you call it like this:
$(this.el).html(this.template(this.model.toJSON()));

// Just include this
<div>
    <%= someAttr %>
</div>

基本的に、モデル属性オブジェクトを渡しています。アンダースコア テンプレートは、そのオブジェクトのプロパティを補間するだけです。必要なものは何でも渡すことができますが、render 呼び出しで行うことはおそらく最も一般的なことです。

于 2012-09-20T02:32:46.460 に答える