5

I have a pretty complex view to render which involves some kind of recursion (the typical folder/file nested list). The fact that it contains heterogeneous objects (folders and files) make it even harder to write Handlebars templates.

Therefore, the only solution I've found is to create a view, and manually fill the render buffer. I came with the following solution:

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

Now, what I'd like is to be able to add links so that each folder and each file is clickable and redirect to another route. But how am I supposed to do that, as I don't have access to the linkTo helper? I've tried to play with the LinkView view, but without any success. Should I register handlers manually for each item?

I've also thought about breaking that with a CollectionView instead, and splitting the content by depth so that I could render it using templates, but it seems more complicated.

Any thoughts?

4

1 回答 1

4

我突然想到，linkTo助手可能不是解决这个问题的最佳方法。linkTo所做的就是，router.transitionTo根据需要动态解析路径以及自动activecss 属性设置。

在您的情况下，您已经有了项目列表，因此可以在视图本身中访问单击的项目。因此，可能不需要LinkView通过帮助程序动态或隐式创建一个然后处理被单击的项目。{{#linkTo}}

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

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

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

于 2013-06-30T17:30:31.790 回答