Question

我的应用程序有一个主Backbone视图，我在基于按钮点击渲染模板时遇到问题。

如果用户单击提交按钮，则应显示template2，否则应显示template1。现在，当我单击提交按钮时，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>

Answer 1

这里有很多小问题。

您的观点正在寻找错误的模板，您有：
```
template1: _.template( $('#one').html() ),
template2: _.template( $('#two').html() ),
```
但<script id="template1">和<script id="template2">。那些需要彼此认同。

var bool = false

initialize执行不设置this.bool，只是声明并初始化initialize内的局部变量。您希望this.bool = false初始化对象属性。
您的观看次数events正在寻找class="submit"点击次数：
```
events: {
  'click .submit': 'result',
}
```
但您的HTML以class="submit"元素开头，模板包含id="clear-all"和class="restart"，因此模板中的按钮不会执行任何操作。如果每个模板只有一个<button>，那么您可以说：
```
events: {
  'click button': 'result',
}
```
某些浏览器对type的默认<button>出错，因此您应始终明确指定：<button type="button">而不是<button>。

一旦你解决了这些问题，它似乎工作正常：http://jsfiddle.net/ambiguous/ThQ8V/3/

骨干视图仅渲染一瞬间

1 个答案: