从knockout.js中获取JSON数组中的所有键

时间:2013-03-05 19:22:24

标签: javascript knockout.js knockout-mapping-plugin

我第一次使用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”数组中所有元素的名称,因此我想列出所有元素。

我该如何做到这一点?

由于

2 个答案:

答案 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>

这有帮助吗?