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

是的 - 它与“单个数据中没有括号”有关。

带括号的表示它是array;一个可以迭代的列表（foreach）。
没有括号意味着它是object;可以存储在数组中但不能使用foreach迭代的东西。

因此，您希望它像数组一样运行，以便您可以迭代结果。第一步，您需要使用observableArray而不是observable：

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 2

foreach绑定可以接受指定各种选项的数组或对象。在这种情况下，Knockout认为你给它的对象是后者。如果您使用对象语法并使用data选项指定数据，它将起作用。

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

示例：http://jsfiddle.net/mbest/Dta48/

Answer 3

使用observableArray而不是observable

self.productData = ko.observableArray();

当单个数据返回时，Knockoutjs的foreach无法正常工作

3 个答案: