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

ノックアウトは配列を介してのみ foreach になると思います。これを試すことができます：

<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

「params」が予測できない数のプロパティを持つオブジェクトであるだけでなく、それぞれに予測できない数のプロパティを持つオブジェクトの配列であることは、図を少し混乱させます。ただし、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 バインディングは次のようになります (最上位のバインディングは、「params」ではなく、新しい計算プロパティ「parameterNames」に対するものであることに注意してください)。

    <!-- 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 に答える