1

いくつかのドキュメントを読んでBackbonejsを試していました。これは、クライアント側のMVCフレームワークです。ビュー内で、テンプレートをコンパイルしてレンダリングします（DOMにアタッチするか、操作を行います）。バックボーンには、テンプレート要素であるアンダースコアjsの依存関係があります。

Bboneを使用すると、ビューを操作するときelに画像が表示されます。私の理解でelは、それはを参照していDOM Objectます。domオブジェクトが割り当てられていない場合は、空のdivと見なされます。

var Choose_view = new SearchView（{el：$（ "＃choose_me"）}）;

したがって、上記の場合、choose_viewが呼び出されると、IDがchoose_meのdivが操作されます。これまでのところ良いですが、時系列で以下に起こっていることは何ですか、私は得ることができませんでした、また冗長性はありますか、クエリのコメントを読んでください：

// the div with id search_container will be picked up by el
<div id="search_container"></div>

<script type="text/javascript">
    SearchView = Backbone.View.extend({
        initialize: function(){
            this.render();
        },
        render: function(){
            //1. Compile the template using underscore, QUESTION: **what does this mean**?
            var template = _.template( $("#search_template").html(), {} );
            //2. Load the compiled HTML into the Backbone "el"
            this.el.html( template );
        }
    });
    // QUESTION: **When in 2. we have already mentioned, el, can we not over there
    provide the div element?**
    var search_view = new SearchView({ el: $("#search_container") });
</script>

<script type="text/template" id="search_template">
    <label>Search</label>
    <input type="text" id="search_input" />
    <input type="button" id="search_button" value="Search" />
</script>
4

1 に答える 1

1

質問1

テンプレートをコンパイルすると、テンプレート関数の引数としてデータオブジェクトを渡すことができるテンプレート関数を取得できます。これにより、1回だけコンパイルしながら、さまざまなデータオブジェクトを使用してテンプレート関数を何度も評価できます。

compiledTemplate = _.template( $("#search_template").html());
this.el.html(compiledTemplate(data));
another.el.html(compiledTemplate(otherData));

上記の例では、テンプレートを1回コンパイルしてから、2回使用します。指定したコードでは、テンプレートのコンパイルと使用を同時に行います

それで

_.template( $("#search_template").html()); // Create a template function, the result is a function that you can call with a data object as argument
_.template( $("#search_template").html(), data); // Create a template function and call it directly with the data object provided, the result is a string containing html

参照：http：//underscorejs.org/#template

質問2

div要素を直接指定することもできますが、elは、すべてのDOMイベントが委任されるビューのルート要素を取得するためのヘルパーです。

バックボーンドキュメントに示されているように

すでにDOMにある要素を参照するビューを作成する場合は、オプションとして要素を渡します。new View({el: existingElement})

参照：http：//backbonejs.org/#View-el

于 2012-10-11T13:04:49.383 に答える