javascript - 在 knockout.js 中从 JSON 数组中获取所有键

Question

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

我怎样才能做到这一点？

谢谢

Answer 1

您的“params”不仅是一个具有不可预见数量属性的对象，而且显然是一个对象数组，每个对象都具有不可预见数量的属性，这让图片有点困惑。但是，一种解决方案可能是向您的 View 模型条目添加一个新的“计算”属性，如下所示:

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 绑定(bind)可能看起来像这样(请注意最上面的绑定(bind)是针对新的计算属性“parameterNames”而不是针对“params”)。

    <!-- ko foreach: parameterNames -->
    <td>
        <span class="params" data-bind="text: key"></span> - <span class="params" data-bind="text: value"></span>                       
    </td>

这有帮助吗？