Javascript 在主干js视图中调用一个视图到另一个视图不会出现

当我在主视图中调用另一个视图时，在主视图中调用新视图时出现问题。firstview未渲染。这件事的大问题是，它正在起作用！！但是，如果调用第一个视图，那么视图就不会出现。问题恰恰出现在事件和渲染模板中

homeview

define(['jquery', 'underscore', 'backbone', 'views/top/TopbarpageView', 'views/home/firstView', 'text!templates/home/homeTemplate.html', 'fastclick', 'jmtouch'], function($, _, Backbone, TopbarpageView, firstView, homeTemplate) {
    var HomeView = Backbone.View.extend({
        el: $("#page"),
        events: {
            'click button#openEssay': 'openEssay'
        },
        render: function() {
            $('.menu li').removeClass('active');
            $('.menu li a[href="#"]').parent().addClass('active');
            this.$el.html(homeTemplate);
            var topbarpageView = new TopbarpageView();
            topbarpageView.render();
        },
        openEssay: function() {
            console.log("yyyyyyyyyyyyyy");
            var firstView1 = new firstView();
            firstView1.render();
        }
    });
    return HomeView;
});

define(['jquery', 'underscore', 'backbone', 'text!templates/home/firstTemplate.html', 'fastclick', 'jmtouch'], function($, _, Backbone, firstTemplate) {
    var firstView = Backbone.View.extend({
        el: $("#page"),
        template: _.template(firstTemplate),
        events: {
            "touchstart #invitefriend": "invitefriendAction",
        },
        initialize: function() {
            console.log(" came in this view");
            this.render();
        },
        render: function() {
        console.log("firstview");
            this.$el.html(this.template());
        },
        return firstView;
    });

homeTemplate

<div class="main">
    <div class="container">
        <h5>home page</h5>

        <p><button class='button' id='openEssay'>test</button></p>
    </div>
</div> 

<div class="main">
    <div class="container">
        <h2>new page</h2>
    </div>
</div> 

firstTemplate

<div class="main">
    <div class="container">
        <h5>home page</h5>

        <p><button class='button' id='openEssay'>test</button></p>
    </div>
</div> 

<div class="main">
    <div class="container">
        <h2>new page</h2>
    </div>
</div> 

新页

正如其他人所说，您有两个视图绑定到同一个dom元素。每个视图都将在

render

上重写该dom元素的全部内容。所以，我认为可能发生的事情是渲染第二个视图，但是第一个视图立即以某种方式渲染回它的顶部。尝试在第二个视图的render方法中设置断点，以验证是否存在这种情况

---

通常，如果将多个视图绑定到一个元素，则会出现问题。我建议尝试为每个视图分配自己的dom容器。

正如其他人所说，您有两个视图绑定到同一个dom元素。每个视图都将在

render

上重写该dom元素的全部内容。所以，我认为可能发生的事情是渲染第二个视图，但是第一个视图立即以某种方式渲染回它的顶部。尝试在第二个视图的render方法中设置断点，以验证是否存在这种情况

---

通常，如果将多个视图绑定到一个元素，则会出现问题。我建议尝试为每个视图分配自己的dom容器。

尝试使用append代替html

this.$el.append(this.template());

---

尝试使用append代替html

this.$el.append(this.template());

主视图

events: {
            'click #openEssay': 'openEssay'
        },

及

第一视图

 define(['jquery', 'underscore', 'backbone', 'text!templates/home/firstTemplate.html', 'fastclick', 'jmtouch'], function($, _, Backbone, firstTemplate) {
        var firstView = Backbone.View.extend({
            el: $("#content"),

            events: {
                "touchstart #invitefriend": "invitefriendAction",
            },
            initialize: function() {
                console.log(" came in this view");
                this.render();
            },
            render: function() {
            console.log("firstview");

var urTemplate = _.template( firstTemplate);
                                               this.$el.html(urTemplate);
                this.$el.html(this.template());
            },
            return firstView;


        });

第一模板

<div id ="content">
<div class="main">
    <div class="container">
        <h2>new page</h2>
    </div>
</div> 
</div>

新页

主视图

events: {
            'click #openEssay': 'openEssay'
        },

及

第一视图

 define(['jquery', 'underscore', 'backbone', 'text!templates/home/firstTemplate.html', 'fastclick', 'jmtouch'], function($, _, Backbone, firstTemplate) {
        var firstView = Backbone.View.extend({
            el: $("#content"),

            events: {
                "touchstart #invitefriend": "invitefriendAction",
            },
            initialize: function() {
                console.log(" came in this view");
                this.render();
            },
            render: function() {
            console.log("firstview");

var urTemplate = _.template( firstTemplate);
                                               this.$el.html(urTemplate);
                this.$el.html(this.template());
            },
            return firstView;


        });

第一模板

<div id ="content">
<div class="main">
    <div class="container">
        <h2>new page</h2>
    </div>
</div> 
</div>

新页

您确定要两个视图都引用同一个元素吗？可能只是一个输入错误，但您正在返回视图定义中的firstView模块。您确定要两个视图都引用同一个元素吗？可能只是一个输入错误，但是您正在返回视图定义中的firstView模块。this.$el.append（this.template（））；我使用了这个，但没有使用@Dato'Mohammad nurdinis.$el.append（this.template（））；我使用了这个，但不适用于@Dato'Mohammad Nurdin。如果有一些括号问题，请解决。如果有一些括号问题，请解决。