Javascript 仅主干视图渲染一秒钟

我的应用程序有一个主主干视图，我在基于按钮点击呈现模板时遇到了问题

如果用户单击submit按钮，则应显示template2，否则应显示template1。现在，当我单击submit按钮时，template2只显示一秒钟，然后在template1再次出现之前消失

下面是代码的简化版本，没有其他应用程序功能

app.viewExample = Backbone.View.extend({
  el: "#in",
  template1: _.template( $('#one').html() ),
  template2: _.template( $('#two').html() ),

  events: {
    'click .submit': 'result',
  },

  initialize: function() {
    var bool = false;
    this.listenTo(app.col, 'all', this.render);
  },

  render: function() {
    if (this.bool) {
      var rand = Math.floor(Math.random() * app.opts.length);
      var value = app.col.at(rand).get("title");
      this.$el.html(this.template2( {
        result: value
      }));
    }      
    else if (!this.bool) {
      var total = app.col.length;
      this.$el.html(this.template1( {
        total: total
      }));
    }   
  },

  result: function() {
    this.bool = true; 
    this.render(); 
  }
});

*app.col是此应用程序的集合

模板：

<script type="text/template" id="template1">
    <span id="count"> Currently <%= total %> <%= total === 1 ? 'option' : 'options' %>
    </span>
    <button id="clear-all">Clear all</button>
</script>
<script type="text/template" id="template2">
    <div class="result">
    Result: <%= result %>
    </div>
    <button class="restart">Restart</button>
</script>    

目前
清除所有
结果:
重新启动

HTML:

<section id="in">
    //stuff
    <button class="submit">Submit</button>
</section>

//东西
提交

这里有很多小问题

您的视图正在查找错误的模板，您有：

template1: _.template( $('#one').html() ),
template2: _.template( $('#two').html() ),

但是

和

。这些需要彼此同意

var bool=false

在您的

initialize

中，不设置

这个.bool

，它只是在

initialize

中声明并初始化一个局部变量。您需要

this.bool=false

初始化对象属性

您视图的

事件

正在查找对

class=“submit”

的单击：

但是HTML以一个

class=“submit”

元素开始，模板有

id=“clear all”

和

class=“restart”

，因此模板中的按钮不会做任何事情。如果每个模板只有一个

，则可以说：

events: {
  'click button': 'result',
}

某些浏览器的默认

类型
错误，因此您应该始终明确指定它：
而不是

---

一旦你解决了这些问题，它似乎工作正常：

你能显示你的模板代码以及app.col是什么吗？@code4coffee更新了我的帖子！啊，非常感谢！很抱歉，视图模板名称不匹配，试图简化我的代码以在此处发布，但弄错了。我认为至少有一些问题与精简的演示相关，但为了以防万一，我尝试将它们全部涵盖。

events: {
  'click button': 'result',
}