0

我有一张如下所示的表格。当多个数据来时，它可以正确显示，但如果单个数据来，则数据不显示在表格中。我怀疑单个数据中没有括号..

多个数据样本：

[{"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>
4

3 回答 3

1

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

  • 带括号的表示它是array; 一个可以迭代的列表 ( foreach)。
  • 不带括号的意思是object; 可以存储在数组中但不能使用foreach.

因此，您希望它像一个数组一样工作，以便您可以迭代结果。第一步，您需要使用 anobservableArray而不是 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
});

应该这样做 - 祝你好运！

于 2013-01-10T15:29:27.503 回答
1

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

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

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

于 2013-01-10T20:12:38.817 回答
0

使用 observableArray 代替 observable

self.productData = ko.observableArray();
于 2013-01-10T15:16:30.650 回答