将数组映射到 sap.m.Table 控件答案

【问题标题】：Mapping array of arrays to sap.m.Table control将数组映射到 sap.m.Table 控件
【发布时间】：2016-11-25 12:23:30
【问题描述】：

我的数据如下：

{
    meta: {
              format: "csv",
              info: "desc",
              columns: [
              {
                  id: "Name",
                  type: "Text",
                  length: 32          
              }, 
              {
                  id: "Text",
                  type: "Text",
                  length: 128
              }]
          },
    rows: [
              ["John","xxxx"],
              ["Alpha","yyyy"],
              ["Beta","wwww"],
              ["Gamma","zzzz"]]
}

现在，我正在努力将记录映射到 sap.m.Table 控件，如 Columns 和 Rows。列似乎是直截了当的，直的映射，但行是数组结构的数组。有没有办法绑定这个不是对象数组的结构？

【问题讨论】：

这是stackoverflow.com/questions/40793535/… 的副本。问题是什么？提供的解决方案还不够吗？
@matbtt 它不完全是重复的。我没有编辑已经有完美答案的问题，而是想准确地澄清我的问题，就像我在该问题的评论中所做的那样。这更像是一个面向 SAPUI5/OPENUI5 的问题，而不是 JS 解决方案。
如果你得到一个完美的答案，你应该接受它。然后任何人都可以看到这一点，并且回答者赢得了声誉。

标签： javascript arrays sapui5

【解决方案1】：

如果您使用数组索引而不是属性名称，显然可以创建属性绑定。

<List id="list" items="{/rows}>
   <columns>
       <Column>
           <Label text="{/meta/columns/0/id}"/>
       </Column>
       <Column>
           <Label text="{/meta/columns/1/id}"/>
       </Column>
   </columns>
   <items>
       <ColumnListItem>
           <cells>
               <Text text="{0}"/>
               <Text text="{1}"/>
            </cells>
        </ColumnListItem>   
   </items>
</List>

您可以动态地在控制器中进行如下绑定。它应该很容易适应您的用例：

var list = this.byId("list");

list.bindAggregation("columns", {
    "path" : "/meta/columns",
    "template" : new sap.m.Column({ 
        "header" : new sap.m.Label({ 
            "text" : "{name}" 
        })
    })
});

list.bindAggregation("items", {
    "path" : "/rows",
    "template" : new sap.m.ColumnListItem({
        "cells" : [
            new sap.m.Text({ "text" : "{0}" }), 
            new sap.m.Text({ "text" : "{1}" })
        ]})
});

列表不得包含任何绑定信息。

<List id="list"/>

如果您需要对绑定过程进行更多控制，您可以使用工厂函数而不是模板。

list.bindAggregation("columns", {
    "path" : "/meta/columns",
    "factory" : function(id, context) {
        return new sap.m.Column({ 
            "header" : new sap.m.Label({ 
                "text" : "{name}" 
            })
        });
     }
});

【讨论】：

感谢您的回复，但我无法解决的问题是列数将是动态的。有没有办法动态绑定列？
不是以声明的方式。如果你想要，你需要编写代码。
没错。我没有任何想法来动态绑定列，然后在行中引用相同的列。我在其他地方看到有人提到 formatter，但我是这个 UI5 框架的新手，也没有太多资源可以遵循。通过使用第一个问题中的解决方案，我能够在 ui.Table 中获得类似的结果，但我看到 m.Table 完全不同。
非常感谢。非常感谢您的帮助。你是救生员。当我看到您的编辑时，我已经编写了列绑定。看我学得很快:)。一件小事 - 单元格需要根据列数是动态的，不是吗？我可以保留我们正在创建的列的计数，以便能够以某种方式循环。
您可以传递工厂函数而不是模板。我更新了答案。