Question

我正在尝试从Web API调用填充一个可观察的数组，但是我很难用jQuery get调用来计算它。

当我在数组中进行硬编码时，它可以在这里工作

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

    <table>
        <thead><tr>       <th>Product</th>       <th>Price</th>   </tr></thead>
        <tbody data-bind='foreach: products'>
            <tr>
                <td data-bind='text: name'></td>
                <td data-bind='text: price'></td>

            </tr>
        </tbody>
    </table>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/knockout-3.3.0.js"></script>
    <script>
        function product() {

        }
        function Model() {
            var self = this;
            this.products = ko.observableArray();
        }
        var mymodel = new Model();

            mymodel.products.push(product = { name: "Beer", price: 10.99 });
            mymodel.products.push(product = { name: "Brats", price: 7.99 });
            mymodel.products.push(product = { name: "Buns", price: 1.49 });
        }

        $(document).ready(function () {
            ko.applyBindings(mymodel);

        });
    </script>
</body>
</html>

接下来，我使用Web API调用替换了产品数组的硬编码值。

public class productController : ApiController
    {
        public IEnumerable<product> get()
        {
            List<product> products = new List<product>
        {
            new product() { name="Beer", price=10.99},
            new product() { name="Brats", price=7.99},
            new product() { name="Buns", price=1.49},
        };
            return products;
        }

所以，当我转到URL / api /产品时，我得到了。

[{"name":"Beer","price":10.99},{"name":"Brats","price":7.99},{"name":"Buns","price":1.49}]

所以现在我想从Web API填充我的可观察数组，但是这里是我试图卡住的地方。

function populateProducts() {

            $.getJSON("/api/products", function (myData) {
             $.each(myData, function (key, value) {

             mymodel.products.push(product =  {key: value, });

            });

             });

但这似乎不起作用。

我不想用其属性定义类产品，因为当我实际执行此操作时会有许多属性，所以我只想从Web API获取它们。所以我不想定义像这样的产品

 function Product(name, price) {
            this.name = ko.observable(name);
            this.price = ko.observable(price);

        }

Answer 1

这是the ko-mapping library的典型用例。对于你的情况可以这样做：

＆＃13;

// Stub!
$ = { 
  getJSON: function(url, callback) {
    var fakeData = [{"name":"Beer","price":10.99},{"name":"Brats","price":7.99},{"name":"Buns","price":1.49}];
    callback(fakeData);
  }
};

// Stub!
var mymodel = { products: [] }; 

function populateProducts() {
  $.getJSON("/api/products", function (myData) {
    mymodel.products = ko.mapping.fromJS(myData);
  });
};

populateProducts();

ko.applyBindings(mymodel);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>

<ul data-bind="foreach: products">
  <li>
    <span data-bind="text: name"></span>
    <span data-bind="text: price"></span>
  </li>
</ul>

＆＃13;

在未定义类时，从json填充可观察数组

1 个答案: