json - 単一のデータが返されたときに Knockoutjs の foreach が機能しない

Question

以下に示す表があります。複数のデータが来るとちゃんと表示されますが、単一のデータが来ると表にデータが表示されません。単一のデータに括弧がないと思われます..

複数のデータ サンプル:

[{"Id":1,"Name":"Tomato soup","Category":"Groceries","Price":1.39},{"Id":2,"Name":"Yo-yo","Category":"Toys","Price":3.75},{"Id":3,"Name":"Hammer","Category":"Hardware","Price":16.99}]

単一のデータ サンプル

{"Id":1,"Name":"Tomato soup","Category":"Groceries","Price":1.39}

テーブルとスクリプト:

<script type="text/javascript">
    $(document).ready(function () {
        function ProductViewModel() {
            var self = this;
            self.productData = ko.observable();
            self.productId = ko.observable();

            self.getAllProducts = function () {
                $.get('/api/products', {}, self.productData);
            };

            self.getProductById = function () {
                $.get('/api/products/' + self.productId(), {}, self.productData);
            };
        }

        ko.applyBindings(new ProductViewModel());
    });
</script>
<input id="txtId" type="text" data-bind="value: productId" />
<button id="btnGetSpeProduct" data-bind="click: getProductById">Get Product By Id</button>
<button id="btnGetProducts" data-bind="click: getAllProducts">Get All Products</button><br />
<table data-bind="with: productData">
            <thead>
                <tr>
                    <th>
                        Name
                    </th>
                    <th>
                        Category
                    </th>
                    <th>
                        Price
                    </th>
                </tr>
            </thead>
            <tbody data-bind="foreach: $data">
                <tr>
                    <td data-bind="text: Name">
                    </td>
                    <td data-bind="text: Category">
                    </td>
                    <td data-bind="text: Price">
                    </td>
                </tr>
            </tbody>
        </table>

Answer 1

foreachバインディングは、さまざまなオプションを指定する配列またはオブジェクトのいずれかを受け入れることができます。この場合、Knockout は、与えられたオブジェクトが後者であると認識します。オブジェクト構文を使用し、dataオプションを使用してデータを指定すると機能します。

<tbody data-bind="foreach: {data: $data}">

サンプル: http://jsfiddle.net/mbest/Dta48/

Answer 2

はい-「単一データに括弧がない」ことに関係があります。

• 括弧付きのものは、それがarray;であることを意味します。繰り返し可能なリスト ( foreach)。
• 括弧のないものは、それがobject;であることを意味します。配列内に格納できますが、 を使用して反復することはできませんforeach。

そのため、結果を反復処理できるように、配列のように振る舞う必要があります。observableArray最初のステップでは、オブザーバブルの代わりにを使用する必要があります。

self.productData = ko.observableArray();

$.get次に、データを直接バインドするのではなく、その配列にデータをプッシュする必要があります。

$.get('/api/products', function(data) {
    // Iterate over the data variable, and use
    // self.productData.push(ITEM)
    // to add it to the array
});

それでうまくいくはずです-頑張ってください！

Answer 3

observable の代わりに observableArray を使用する

self.productData = ko.observableArray();