Javascript knockout.js foreach绑定：列名数组的属性值

我有一个关于每个绑定到表的敲除的问题

我有一个列名数组和一个项数组

items数组有一个名为ColumnName的属性。如何使用knockout foreach将self.items绑定到self.columnNames

我的视图模型如下所示：

var VM = function () {
    var self = this;
    self.items = ko.observableArray();
    self.columnNames = [ "Name", "Age", "Job"];
};
var vm = new VM();

ko.applyBindings(vm);

vm.items.push([
    {
        'ColumnName': 'Name',
        'Value': 'John'
    },
    {          
        'ColumnName': 'Age',
        'Value': 25'
    }
]);

vm.items.push([
    {
        'ColumnName': 'Name',
        'Value': 'Jane'
    },
    {          
        'ColumnName': 'Age',
        'Value': 26
    },
    {          
        'ColumnName': 'Job',
        'Value': 'developer'
    }

]);

Name    Age     Job
John    25
Jane    26      Developer

[[{ 'ColumnName': 'Name', 'Value': 'John' }, { 'ColumnName': 'Age', 'Value': 25 }], [{ 'ColumnName': 'Name', 'Value': 'Jane' }, { 'ColumnName': 'Age', 'Value': 22 }, { 'ColumnName': 'Job', 'Value': 'developer' }]]

[{ Age: 25 Name: "John" }, { Age: 26, Job: "developer", Name: "Jane" }]

[ "Name", "Age", "Job"]

[[{ 'ColumnName': 'Name', 'Value': 'John' }, { 'ColumnName': 'Age', 'Value': 25 }], [{ 'ColumnName': 'Name', 'Value': 'Jane' }, { 'ColumnName': 'Age', 'Value': 22 }, { 'ColumnName': 'Job', 'Value': 'developer' }]]

在我看来，我想我需要这样的东西

<table>
    <thead>
        <tr data-bind="foreach: columnNames">
            <th> <span data-bind="text: $data"></span>

            </th>
        </tr>
    </thead>
    <tbody data-bind="foreach: items">
        <tr data-bind="foreach: $parent.columnNames">
            <!-- how do I put the Value property here?! -->
        </tr>
    </tbody>
</table>

--更新2-- 我创造了一个丑陋（但有效）的解决方案

我添加了这个方法调用。它将列名映射为属性名，将值映射为属性值，但感觉我完全错过了一个更简单的解决方案：

    self.fixedItems = ko.observableArray();   //I use this in foreach

    self.fixData = function(){
        $.each(self.items(), function(i, rows){
            var cell = new Object();
            $.each(rows, function(j, prop){
                cell[prop.ColumnName] = prop.Value;

            });
            self.fixedItems.push( cell );
        });
   }; 

原始数据如下所示：

var VM = function () {
    var self = this;
    self.items = ko.observableArray();
    self.columnNames = [ "Name", "Age", "Job"];
};
var vm = new VM();

ko.applyBindings(vm);

vm.items.push([
    {
        'ColumnName': 'Name',
        'Value': 'John'
    },
    {          
        'ColumnName': 'Age',
        'Value': 25'
    }
]);

vm.items.push([
    {
        'ColumnName': 'Name',
        'Value': 'Jane'
    },
    {          
        'ColumnName': 'Age',
        'Value': 26
    },
    {          
        'ColumnName': 'Job',
        'Value': 'developer'
    }

]);

Name    Age     Job
John    25
Jane    26      Developer

[[{ 'ColumnName': 'Name', 'Value': 'John' }, { 'ColumnName': 'Age', 'Value': 25 }], [{ 'ColumnName': 'Name', 'Value': 'Jane' }, { 'ColumnName': 'Age', 'Value': 22 }, { 'ColumnName': 'Job', 'Value': 'developer' }]]

[{ Age: 25 Name: "John" }, { Age: 26, Job: "developer", Name: "Jane" }]

[ "Name", "Age", "Job"]

[[{ 'ColumnName': 'Name', 'Value': 'John' }, { 'ColumnName': 'Age', 'Value': 25 }], [{ 'ColumnName': 'Name', 'Value': 'Jane' }, { 'ColumnName': 'Age', 'Value': 22 }, { 'ColumnName': 'Job', 'Value': 'developer' }]]

结果（self.fixedItems）如下所示：

var VM = function () {
    var self = this;
    self.items = ko.observableArray();
    self.columnNames = [ "Name", "Age", "Job"];
};
var vm = new VM();

ko.applyBindings(vm);

vm.items.push([
    {
        'ColumnName': 'Name',
        'Value': 'John'
    },
    {          
        'ColumnName': 'Age',
        'Value': 25'
    }
]);

vm.items.push([
    {
        'ColumnName': 'Name',
        'Value': 'Jane'
    },
    {          
        'ColumnName': 'Age',
        'Value': 26
    },
    {          
        'ColumnName': 'Job',
        'Value': 'developer'
    }

]);

Name    Age     Job
John    25
Jane    26      Developer

[[{ 'ColumnName': 'Name', 'Value': 'John' }, { 'ColumnName': 'Age', 'Value': 25 }], [{ 'ColumnName': 'Name', 'Value': 'Jane' }, { 'ColumnName': 'Age', 'Value': 22 }, { 'ColumnName': 'Job', 'Value': 'developer' }]]

[{ Age: 25 Name: "John" }, { Age: 26, Job: "developer", Name: "Jane" }]

[ "Name", "Age", "Job"]

[[{ 'ColumnName': 'Name', 'Value': 'John' }, { 'ColumnName': 'Age', 'Value': 25 }], [{ 'ColumnName': 'Name', 'Value': 'Jane' }, { 'ColumnName': 'Age', 'Value': 22 }, { 'ColumnName': 'Job', 'Value': 'developer' }]]

---

它“修复”了数据，因此可以方便地在foreach中使用。感觉我错过了一个优雅的解决方案

项目属性的名称必须与

列名称相同。然后可以访问
项的属性。像这样：

var VM = function () {
    var self = this;
    self.items = ko.observableArray();
    self.columnNames = [ "Name", "Age", "Job"];
};
var vm = new VM();

ko.applyBindings(vm);

vm.items([
    {
        'Name': 'Jonn',
        'Age': '10',
        'Job': 'Developer'
    },
    {
        'Name': 'Jonn',
        'Age': '25',
        'Job': 'Developer'
    }
    ]
);

HTML


它更干净，不是吗？
我有一个列数组，看起来像这样：

var VM = function () {
    var self = this;
    self.items = ko.observableArray();
    self.columnNames = [ "Name", "Age", "Job"];
};
var vm = new VM();

ko.applyBindings(vm);

vm.items.push([
    {
        'ColumnName': 'Name',
        'Value': 'John'
    },
    {          
        'ColumnName': 'Age',
        'Value': 25'
    }
]);

vm.items.push([
    {
        'ColumnName': 'Name',
        'Value': 'Jane'
    },
    {          
        'ColumnName': 'Age',
        'Value': 26
    },
    {          
        'ColumnName': 'Job',
        'Value': 'developer'
    }

]);

Name    Age     Job
John    25
Jane    26      Developer

[[{ 'ColumnName': 'Name', 'Value': 'John' }, { 'ColumnName': 'Age', 'Value': 25 }], [{ 'ColumnName': 'Name', 'Value': 'Jane' }, { 'ColumnName': 'Age', 'Value': 22 }, { 'ColumnName': 'Job', 'Value': 'developer' }]]

[{ Age: 25 Name: "John" }, { Age: 26, Job: "developer", Name: "Jane" }]

[ "Name", "Age", "Job"]

[[{ 'ColumnName': 'Name', 'Value': 'John' }, { 'ColumnName': 'Age', 'Value': 25 }], [{ 'ColumnName': 'Name', 'Value': 'Jane' }, { 'ColumnName': 'Age', 'Value': 22 }, { 'ColumnName': 'Job', 'Value': 'developer' }]]

数据如下所示：

var VM = function () {
    var self = this;
    self.items = ko.observableArray();
    self.columnNames = [ "Name", "Age", "Job"];
};
var vm = new VM();

ko.applyBindings(vm);

vm.items.push([
    {
        'ColumnName': 'Name',
        'Value': 'John'
    },
    {          
        'ColumnName': 'Age',
        'Value': 25'
    }
]);

vm.items.push([
    {
        'ColumnName': 'Name',
        'Value': 'Jane'
    },
    {          
        'ColumnName': 'Age',
        'Value': 26
    },
    {          
        'ColumnName': 'Job',
        'Value': 'developer'
    }

]);

Name    Age     Job
John    25
Jane    26      Developer

[[{ 'ColumnName': 'Name', 'Value': 'John' }, { 'ColumnName': 'Age', 'Value': 25 }], [{ 'ColumnName': 'Name', 'Value': 'Jane' }, { 'ColumnName': 'Age', 'Value': 22 }, { 'ColumnName': 'Job', 'Value': 'developer' }]]

[{ Age: 25 Name: "John" }, { Age: 26, Job: "developer", Name: "Jane" }]

[ "Name", "Age", "Job"]

[[{ 'ColumnName': 'Name', 'Value': 'John' }, { 'ColumnName': 'Age', 'Value': 25 }], [{ 'ColumnName': 'Name', 'Value': 'Jane' }, { 'ColumnName': 'Age', 'Value': 22 }, { 'ColumnName': 'Job', 'Value': 'developer' }]]

我的问题是使用foreach绑定将数据与列匹配

我的解决方案是编写一个函数，将ColumnName映射为属性名，将值映射为其值。我使用的完整方法是在JSFIDLE链接（如下）中，但基本上，我是这样做的

cell[prop.ColumnName] = prop.Value;

这给了我一个新的ObservalArray，其中包含更清晰的数据，我可以在我的foreach表中使用：

[{ Age: 25 Name: "John" }, { Age: 26, Job: "developer", Name: "Jane" }]

实际解决方案如下：

我觉得我没有找到一个干净的解决方案，但它确实有效。
此解决方案使用函数from将每个字典数组展平为一个对象，使事情变得更简单


var VM=function（）{
var self=这个；
self.items=ko.observearray（[]）；
self.columnNames=[“姓名”、“年龄”、“职务”]；
};
var vm=新vm（）；
ko.应用绑定（vm）；
var减少=功能（arr）{
返回u.reduce（arr，函数（o，n）{o[n.ColumnName]=n.Value；返回o；}，{}）；
}
vm.items.push（减少([{
“ColumnName”：“Name”，
“价值”：“约翰”
}, {
“ColumnName”：“Age”，
“值”：25
}
]));
vm.items.push（减少([
{
“ColumnName”：“Name”，
“值”：“简”
},
{          
“ColumnName”：“Age”，
“值”：26
},
{          
“ColumnName”：“作业”，
“值”：“开发人员”
}
]));

哼哼几个错误检查一下这个。希望对你有帮助谢谢。不幸的是，我每行都有一个新的数组，每个数组元素只包含一列数据。哇，这是一个很难使用的模型。您如何知道包含列名“job”和值“developer”的对象与包含列名“name”和值“jane”的对象相关？是的，这是一个允许用户定义列的遗留解决方案。我知道包含列名“job”和值“developer”的对象与包含列名“name”和值“jane”的对象相关，因为它们位于同一数组中：。[{'ColumnName'：'Name'，'Value'：'Jane'}，{'ColumnName'：'Age'，'Value'：22}，{'ColumnName'：'Job'，'Value'：'developer'}]我想没有更简单的解决方案，您的修复看起来像是一种方式，因为有可能会有数据进来（动态），您可以使用
subscribe
检查此项。good luckOP有不同格式的数据，这使得他的问题很棘手。是的，如果财产名称（如“名称”、“年龄”、“工作”）与实际财产的位置相同，那就好了。不幸的是，它们是名为“ColumnName”的属性中的值。这是一个更干净的解决方案。看起来不错！与我的建议不同，它只是使用普通javascript和knockout。