0

それはかなり基本的なことですが、私はまだ答えを見つけることができません。ビューをテンプレートel:にある divに設定する必要があります。underscore.js

<script id="product" type="text/template">
    <div class="productInfo"></div>
    <div class="prices"></div>
    <div class="photos"></div>
</script>

最初のビューはproductテンプレートをレンダリングします。このテンプレートでは、他のビューを div にレンダリングする必要があります。テンプレートでdivを操作できないel:ため、設定方法がわかりません。el: '.prices'

この Views 構造は、Backbone.js でサブビューの初期化とレンダリングを処理する方法に似ています。. ただし、既存の div にレンダリングする代わりにテンプレートを使用します。

4

3 に答える 3

1

そのため、CSS セレクター文字列を使用してthis.elも、一致するもの<div>がページの DOM に関連付けられていない場合、何も見つかりません。<script>タグ テンプレートの場合、タグのコンテンツは<script>DOM ノードに関連付けられておらず、テキスト ノードが 1 つだけ存在します。

HTML のオプションの 1 つは、タグのことは忘れて、<script>空の<div>タグを直接 HTML に挿入することです。それらは空であるため、実際にそれらのコンテンツをレンダリングするまで、無害で目に見えないはずです。そうすれば、うまくいくel: '.productInfo:first'はずです。

それ以外に、次の行に沿って親ビューにロジックを配置する必要があります。

  • テンプレートを切り離された DOM ノードにレンダリングする
  • サブビュー div の切り離された DOM ノードを検索します
  • サブビュー div を対応するバックボーン ビュー サブクラスにマップする
  • サブビューをインスタンス化してレンダリングしthis.$el.find('.productInfo').replaceWith(productInfoView.el)、レンダリングされた HTML を適切な場所の親ビューに配置するようなものを使用します

私の一般的なコメントは、ビューはデタッチされた DOM ノードにレンダリングし、ルーターやレイアウト マネージャーなどの他のコンポーネントに任せて、実際の DOM のどこにアタッチするかを決定することです。これにより、ビューがより再利用可能になり、テストしやすくなると思います。

于 2012-12-31T15:09:24.117 に答える
0

バージョン 0.9.9から、バックボーンelはビューのプロパティを関数として定義することを許可します:

View、options、el、および tagName を宣言するときに、それらの値を実行時に決定する場合は、関数として定義できるようになりました。

サブビューがメイン ビューの後に作成されると仮定すると、サブビューが親を認識している場合、これが役立つ場合があります。 

 SubView = Backbone.View.extend({
     el : function(){
         return this.parent.$('.prices');
     }
 });

 var subViewInstance = new SubView({parent : theParentView});
于 2012-12-31T15:21:13.597 に答える
0

親ビューをレンダリングし、'.prices' を子の el として割り当てます。

var ParentView = Backbone.View.extend({
    render : function() {
        var html='<h1>Parent View</h1><div class="productInfo"></div><div class="prices"></div><div class="photos"></div>';
        this.$el.html(html);

        var prices = new PricesView({
            el : this.$('.prices')
        });
        prices.render();
    }
});

var PricesView = Backbone.View.extend({
    render : function() {
        var html='<h2>Prices View</h1>';
        this.$el.html(html);
    }
});

// Create a parent view instance and render it
var parent = new ParentView({
    el : $('.parent')
});

parent.render();

</p>

jsfiddle での作業例: http://jsfiddle.net/JpeJs/

于 2012-12-31T15:12:15.087 に答える