1

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

我怎样才能做到这一点？

谢谢

4

2 回答 2

1

我认为淘汰赛只会对数组进行遍历。你可以试试这个：

<td data-bind="foreach: { data: Object.keys(params) }">
    <span data-bind="text: params[$data]"></span>
</td>

请注意 Object.keys 仅适用于现代浏览器。

于 2013-03-05T19:58:11.960 回答
1

它使图片有点混乱，您的“参数”不仅是一个具有不可预见的属性数量的对象，而且显然是一个对象数组，每个对象具有不可预见的属性数量。但是，一种解决方案可能是向您的视图模型条目添加一个新的“计算”属性，如下所示：

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>

这有帮助吗？

于 2013-03-05T20:01:18.547 回答