0

私が十分に明確であることを願っています。そうでない場合は、説明を求めてください。
メイン テンプレートに合わせてエンド クリエイト ビューを削除したいのですが…</p>

次の実装を試みましたが、失敗しました。

   // main-template.html

   <div id=""project>
     <div class="main-template">
        <div id="view1"></div>
        <div class="foldable-block">
            <div id="view2"></div>
            <div id="view3"></div>       
        </div>
     </div>
   </div>

//mainView.js
define([
    "js/views/view1",
    "js/views/view2",
    "js/views/view3",
    "text!templates/main-template.html"
], function (View1, View2, View3, mainTemaplte) {

    var MainView = Backbone.View.extend({

        initialize: function ()
        {
            this.$el.html(Mustache.render(mainTemaplte));
            this.render();
        },

        el: $("#project"),

        render: function ()
        {
            var options = this.options;

            this.view1 = new View1(options);
            this.view2 = new View2(options);
            this.view3 = new View3(options);
        }
    });    

    return MainView;
});

//view1.js
define([… ], function (..) {

    var View1 = Backbone.View.extend({

         el: $("#view1"),

         initialize: function () {
             console.log(this.$el) // []
             setTimeout( function () {
                    console.log(this.$el) // []
             }, 2000);
         }

    });

    return View1;

});

コメントからわかる問題はview1.js 

(this.$el) // []

私のjsコンソールから動作します：

$("#view1") // <div>….</div>

私の目標は次のとおりです
。1) mainView.js モジュールをロードするときに、ビュー (view1、view2、view3) をアタッチするテンプレートを作成したい
2) ビューがアタッチされているすべての DOM のビューの削除をトリガーするとき、削除する必要があります。
3) モジュールを再度呼び出すとmainView.js、テンプレートを再作成する必要があります。

提案する他のアイデアがある場合は、投稿してください。

@nikoshr のおかげthis.$elで、 inview1.jが定義されており、render を呼び出すと、view1.js適切this.$elに塗りつぶされます
が、ドキュメントの本文には添付されません。
私のに追加または同様のjqueryメソッドを使用せずにそれを作成するにはどうすればよいmain-template.htmlですか?

ここで私のレンダリング機能：

    render: function () 
    {
         this.$el.html(Mustache.render(myTemplate, this.view);
    }
4

1 に答える 1

2

必要なときに存在しない要素にサブビューをアタッチしています。次のようなことは、正しい方向への一歩かもしれません。

mainView.js

define([
    "js/views/view1",
    "js/views/view2",
    "js/views/view3",
    "text!templates/main-template.html"
], function (View1, View2, View3, mainTemaplte) {

    var MainView = Backbone.View.extend({

        initialize: function ()
        {
            this.render();
        },

        render: function ()
        {
            // render from template and assign this.el to the root of the element
            // e.g #project
            var html=Mustache.render(mainTemaplte);
            this.setElement( $(html) );

            // create each view with its el set to the correct descendant
            this.view1 = new View1( _.extend( {el:this.$("#view1")} , this.options) );
            this.view2 = new View2( _.extend( {el:this.$("#view2")} , this.options) );
            this.view3 = new View3( _.extend( {el:this.$("#view3")} , this.options) );
        }
    });    

    return MainView;
});

view1.js

define([… ], function (..) {

    var View1 = Backbone.View.extend({

         initialize: function () {
             console.log(this.$el);
         }

    });

    return View1;
});

そして、次のような方法でビューを再作成できます

require(["js/views/mainView"], function(MainView) {
    var view=new MainView();
    console.log(view.$el);

    //attach  the view to the DOM
    $("body").append(view.$el);
});
于 2012-05-16T12:21:28.900 に答える