Javascript 渲染和删除多个视图…；

我希望我足够清楚，否则请我澄清。
我想删除与主模板一致的最终创建视图

我确实尝试了以下实现，但没有成功

   // 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>

---

您可以从评论中看到的问题位于

view1.js

(this.$el) // []

从我的js控制台，它可以工作：

$("#view1") // <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.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;
});

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

    var View1 = Backbone.View.extend({

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

    });

    return View1;
});

view1.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;
});

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);
});

---

ti工作得很好。只有一个问题

this.$el

已在view1.js中定义，当我在

view1.js

中调用render时，

this.$el

已正确填充，但未附加到文档正文。我怎么做这个？我确实发布了更多关于view1.js的代码。@下划线666您的view1渲染应该可以正常工作，并且可以在主视图中更新#view1。如果我理解正确，mainview是应该附加到DOM的。我修改了上一个代码块以反映这一点。还是我遗漏了什么？

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

    //attach  the view to the DOM
    $("body").append(view.$el);
});