javascript - 管理模板中定义的嵌套 View 的顺序

Question

问题:

如何获取嵌套 View 列表(因为它们在模板中定义)并对它们重新排序？或者将 View 从一个父 View 移动到另一个父 View ？

例如，我想切换包含日期的地点列和包含图像的列，或者在用户操作时隐藏其中任何一个

{{#data-grid}}
  {{#grid-column}}
    {{format-date date}}
  {{/grid-column}}
  {{#grid-column}}
    {{#link-to 'somewhere'}}<img scr="i.png" title="hello"/>{{/link-to}}
  {{/grid-column}}
{{/data-grid}}

原因:

我正在实现数据网格，并在运行时重新排序和隐藏列。为所有情况声明 View 类，然后在 Controller 中使用它们对我来说似乎很难看。

已经尝试使用ContainerView，但找不到用模板内容填充childViews的方法

更新 当前状态数据网格源代码:http://pastebin.com/E61e6WCt

Answer 1

如果您想自己实现此功能，您应该查看 CollectionView 。您的每一列都应该是 View 内容数组中的一项。重新排序数组也应该正确地重新排序 DOM 元素。

这是一个粗略的草图:基本上，您正在子类中重写createChildView。您可以将字符串传递到内容数组中以指示其类型。在 createChildView 中，您可以通过 attrs 对象及其 content 属性访问当前项目。

App.ColumnsCollectionView = Ember.CollectionView.extend({
    content : ["date", "image"],
    createChildView: function(viewClass, attrs) {
        var itemFromContent = attrs.content; // is either 'date' or 'image'
        if (itemFromContent == 'date') {
          viewClass = App.YourDateColumnView;
        } else {
          viewClass = App.YourImageColumnView;
        }
        return this._super(viewClass, attrs);
    }
});