backbone.js - 编辑与列表时，BackboneJs 单个视图的多个模板渲染

Question

我正在开发我的第一个主干应用程序，并且我有以下 app.js 代码：

https://gist.github.com/mikedevita/f26cb481385c5574001e

和以下视图模板：

<button id="addZone" class="btn btn-success">Add Zone</button>
<script type="text/template" id="zone-template">
    <td><a href="#zone/<%= id %>">(<%= id %>) <%= name %></a></td>
    <td><a href="#zone/edit/<%= id %>" class="edit"><i class="icon-edit" title="Edit"></i></a> | <a href="#zone/destroy/<%= id%>" class="destroy"><i class="icon-trash" title="Delete"></i></a></td>
</script>
<script type="text/template" id="zoneEdit-template">
    <td>
        <form method="POST" class="form-inline" id="edit-form">
            <input type="text" name="name" value="<%= name %>" class="input-small">
            <input type="submit" class="btn btn-small btn-primary" title="Submit"><i class="icon-check"></i></input>
        </form>
    </td>
    <td><a href="#zone/destroy/<%= id%>" class="destroy"><i class="icon-trash" title="Delete"></i></a></td>
</script>

如何在编辑“区域”时渲染编辑模板并在编辑完成后触发列表模板（默认）。

当您单击编辑图标时，它现在可以很好地呈现编辑模板，但我无法弄清楚如何让它在模型的更改事件时触发列表模板。

我在我的 c9 帐户上有完整的应用程序设置： https ://c9.io/gorelative/backbone-test

Answer 1

在查看您的代码后，事实证明这只是对函数的缺失调用。您this.render在model.change回调中声明而不是正确调用函数this.render();

App.Views.Zone = Backbone.View.extend({
  //...
initialize: function(){
  this.template = _.template( $('#zone-template').html() );
  this.model.on('change', function(){ 
    this.template = _.template( $('#zone-template').html() ); 
    this.render(); /* you were not calling  */
  }, this);
  this.model.on('destroy', this.remove, this);
},
//...
});