管理模板中定义的嵌套视图的顺序

Managing order of nested view defined in template

本文关键字：嵌套 顺序 视图 定义 管理      更新时间：2023-09-26

>问题：

如何获取嵌套视图列表（如模板中定义的那样）并重新排序？或者将视图从一个父级视图移动到另一个父级视图？

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

{{#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}}

原因：

我正在通过运行时中的重新排序和隐藏列来实现数据网格。为所有情况声明视图类，然后在控制器中使用它们对我来说似乎很丑陋。

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

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

如果你想自己实现这一点，你应该看看CollectionView。每个列都应是视图内容数组中的一个项目。对数组进行重新排序也应该正确重新排序 DOM 元素。

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

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);
    }
});
相关文章：