ember.js - 在 EmberJS View 中以编程方式创建链接

Question

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

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

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>');
  }
});

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

我也考虑过用 CollectionView 来打破这一点，并按深度分割内容，以便我可以使用模板渲染它，但它看起来更复杂。

有什么想法吗？

Answer 1

我认为 linkTo 帮助器可能不是解决此问题的最佳方法。 linkTo 所做的只是 router.transitionTo，根据需要动态解析路径以及自动 active css 属性设置。

就您而言，您已经拥有项目列表，因此可以在 View 本身中访问单击的项目。因此，可能不需要通过 {{#linkTo}} 帮助器动态或隐式创建 LinkView 来处理被单击的项目。

我会直接在生成的项目 anchor 上设置old-skool data-some-id。然后在 View 中处理单击，使用 dataset.someId 计算它对应的项目，然后直接在 View 中或通过 transitionToRoute 计算到该项目 Controller 上的 gotoItem。

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

我在 jsbin 中尝试了类似的设置。我使用了带有模板的 ProductsListView ，但该方法与您的示例中的编程 View 类似。