我第一次使用knockout.js并拥有如下数组:
function AppViewModel() {
var self = this;
self.calls = ko.observableArray([
{ description: 'Create a new project', url: '/feeds/create', method: 'Get', params: [{ success: "true", token: "123adfds1" }] },
{ description: 'Get info', url: '/feeds/info', method: 'Get', params: [{ success: "true", token: "123adfds1" }] },
]);
}
ko.applyBindings(new AppViewModel());
我可以使用foreach声明来获取它们:
<tbody>
<!-- ko foreach: { data: calls, as: 'call' } -->
<tr>
<td><span data-bind="text: description"></span></td>
<td><span data-bind="text: url"></span></td>
<td><span data-bind="text: method"></span></td>
<!-- ko foreach: params -->
<td>
<span class="params" data-bind="text: $data"></span>
</td>
<!-- /ko -->
<td class="last"><a href="" class="btn btn-mini">Edit</a></td>
</tr>
<!-- /ko -->
</tbody>
我唯一的问题是我并不总是知道“params”数组中所有元素的名称,因此我想列出所有元素。
我该如何做到这一点?
由于
答案 0 :(得分:1)
我认为淘汰赛只会超过数组。你可以试试这个:
<td data-bind="foreach: { data: Object.keys(params) }">
<span data-bind="text: params[$data]"></span>
</td>
请注意,Object.keys仅适用于现代浏览器。
答案 1 :(得分:1)
它使图片混淆了一点,你的“params”不仅是一个具有不可预见数量的属性的对象,而且显然是一个对象数组,每个对象都有不可预见的属性。但是,一种解决方案可能是将新的“computed”属性添加到视图模型条目中,如下所示:
function AppViewModel() {
var self = this;
self.calls = ko.observableArray([
{ description: 'Create a new project', url: '/feeds/create', method: 'Get', params: [{ success: "true", token: "123adfds1" }] },
{ description: 'Get info', url: '/feeds/info', method: 'Get', params: [{ success: "true", token: "123adfds1" }] },
]);
ko.utils.arrayForEach(self.calls(), function(elem) {
elem.parameterNames = ko.computed(function () {
var keys = [];
ko.utils.arrayForEach(elem.params, function (paramEntry) {
for (var key in paramEntry)
keys.push({ key: key, value: paramEntry[key] });
});
return keys;
});
});
}
这会使您的结构以其意想不到的属性名称变为标准化的“关键”/“值”实体的集合。然后你的Knockout绑定看起来像这样(注意最上面的绑定是针对新的计算属性“parameterNames”而不是反对“params”)。
<!-- ko foreach: parameterNames -->
<td>
<span class="params" data-bind="text: key"></span> - <span class="params" data-bind="text: value"></span>
</td>
这有帮助吗?