Ember.js 在EmberJS视图中以编程方式创建链接

我有一个相当复杂的视图要渲染，它涉及某种递归（典型的文件夹/文件嵌套列表）。它包含异构对象（文件夹和文件）这一事实使得编写把手模板变得更加困难

因此，我找到的唯一解决方案是创建一个视图，并手动填充渲染缓冲区。我提出了以下解决方案：

App.LibraryContentList = Ember.View.extend({
  tagName: 'ol',
  classNames: ['project-list', 'dd-list'],

  nameChanged: function() {
    this.rerender();
  }.observes('content.@each.name'),

  render: function(buffer) {
    // We only start with depth of zero
    var content = this.get('content').filterProperty('depth', 0);

    content.forEach(function(item) {
      this.renderItem(buffer, item);
    }, this);
  },

  renderItem: function(buffer, item) {
    switch (item.constructor.toString()) {
      case 'App.Folder':
        this.renderFolder(buffer, item);
        break;
      case 'App.File':
        this.renderFile(buffer, item);
        break;
    }
  },

  renderFolder: function(buffer, folder) {
    buffer.push('<li class="folder dd-item">');
    buffer.push('<span class="dd-handle">' + folder.get('name') + '</span>');

    // Merge sub folders and files, and sort them by sort order
    var content = this.mergeAndSort();

    if (content.get('length') > 0) {
      buffer.push('<ol>');

      content.forEach(function(item) {
        this.renderItem(buffer, item);
      }, this);

      buffer.push('</ol>');
    }

    buffer.push('</li>');
  },

  renderFile: function(buffer, album) {
    buffer.push('<li class="album dd-item">');
    buffer.push('<span class="dd-handle">' + file.get('name') + '</span>');
    buffer.push('</li>');
  }
});

App.LibraryContentList=Ember.View.extend({
标记名：“ol”，
类名：['project-list'，'dd-list']，
名称已更改：函数（）{
这个；
}.observes（'content.@each.name'），
渲染：函数（缓冲区）{
//我们只从零深度开始
var content=this.get（'content'）.filterProperty（'depth'，0）；
content.forEach（功能（项）{
此.renderItem（缓冲区、项目）；
}，这个）；
},
renderItem：函数（缓冲区、项）{
开关（item.constructor.toString（））{
案例“App.Folder”：
此.renderFolder（缓冲区、项）；
打破
案例“App.File”：
此.renderFile（缓冲区、项）；
打破
}
},
renderFolder:函数（缓冲区、文件夹）{
buffer.push（“
”）；
buffer.push（“”+folder.get（'name'）+“”）；
//合并子文件夹和文件，并按排序顺序对其排序
var content=this.mergeAndSort（）；
if（content.get（'length'）>0）{
buffer.push（“”）；
content.forEach（功能（项）{
此.renderItem（缓冲区、项目）；
}，这个）；
buffer.push（“”）；
}
buffer.push（“
”）；
},
renderFile:函数（缓冲区、相册）{
buffer.push（“
”）；
buffer.push（“”+file.get（'name'）+“”）；
buffer.push（“
”）；
}
});

现在，我想要的是能够添加链接，这样每个文件夹和每个文件都可以单击并重定向到另一个路由。但既然我没有链接到帮助程序的权限，我该怎么做呢？我尝试过使用LinkView视图，但没有成功。我应该为每个项目手动注册处理程序吗

我还考虑过用CollectionView来打破这种局面，并按深度分割内容，这样我就可以使用模板来呈现内容，但这似乎更复杂

---

有什么想法吗？

我突然想到，

链接到

助手可能不是最好的方法。所有的

链接到

所做的就是

路由器。转换到

，根据需要动态解析路径，再加上自动的

活动

css属性设置

在您的情况下，您已经有了项目列表，因此可以在视图本身中访问单击的项目。因此，通过

{{{linkTo}}

帮助程序动态或隐式地创建

LinkView

，然后处理单击的项目可能是不必要的

我会直接在生成的项目锚上设置旧的skool

数据some id

。然后在视图中处理单击，使用

dataset.someId

计算它对应的项目，然后

TransitionRoute

直接在视图中或通过控制器上的

gotoItem

传递到该项目

如果有很多这样的项目，这将大大节省DOM元素和Ember视图的数量

---

我尝试了类似的设置在这个。我使用了一个带有模板的

ProductsListView

，但是这种方法与您的示例中的编程

视图类似。
只是一个我没有测试过的想法，添加类似于
Ember.handlebar.compile（{{{{{link story}}}'）
的东西怎么样？我考虑过这个问题，但我只是使用handlebar运行时（我正在编译我的模板），所以我想避免在整个车把上引入依赖关系。谢谢。这听起来是最好的解决方案：）。现在有没有其他方法在ember 1.5上实现这一点？我也遇到过同样的情况，但我想知道是否有一种更干燥的方法来实现这一点。