如何在 Backbone 上创建嵌套模板答案

【问题标题】：how to create nested templates on Backbone如何在 Backbone 上创建嵌套模板
【发布时间】：2013-03-04 20:23:48
【问题描述】：

我是 Backbone 的新手，我正在尝试单击工具栏上的按钮（位于工具栏 div 上），该按钮称为“新建”。单击后，我想在 id="app-list" 的不同 div 上打开一个新面板。

但是当按下新按钮时，它总是会覆盖“app-list”div

这是我的代码（我正在使用 Backbone 和 coffeescript）：

class MyApp.Views.ToolbarAppView extends Backbone.View
  el: "#toolbar-app"

  events: "click #add_new": "newApp"

  newApp: (e) ->
    myapp = new MyApp.Models.App
    @model = myapp
    newPanel = new MyApp.Views.NewAppView({ el: @$el, model: @model, parent: @})
    newParent.render()

 class MyApp.Views.NewAppView extends Backbone.View
   template: JST["myapp", "new_app_view"]

   render: ->
     fieldsPanel = new MyApp.Views.EditAppView({ el: @$el, model: @model, parent: @})
     fieldsPanel.setElement('#app-list').render()



class MyApp.Views.EditAppView extends Backbone.View
  template: JST["myapp", "edit_app_view"]
  tagName: "tr"
  className: "edit_data"

  render: ->
    @$el.html(@template({ el: @$el, model: @model, parent: @})

【问题讨论】：

标签： backbone.js coffeescript

【解决方案1】：

在不知道您的 HTML 结构的外观的情况下，很难推断出问题所在。但是，这两条线在这里发生了一些有趣的事情：

fieldsPanel = new MyApp.Views.EditAppView({ el: @$el, model: @model, parent: @})
fieldsPanel.setElement('#app-list').render()

在构造函数中，将视图的el 设置为ToolbarAppView 的el，然后在下一行将元素更改为另一个元素。

尝试将这两行替换为以下内容：

fieldsPanel = new MyApp.Views.EditAppView({ el:'#app-list', model: @model, parent: @})

如果失败，请考虑使用更多信息编辑您的问题，尤其是关于 HTML 模板的相关部分。

【讨论】：