尝试通过 webapi 从通用列表中获取并与 knockoutjs 绑定答案

【问题标题】：trying to go from generic list via webapi and bind with knockoutjs尝试通过 webapi 从通用列表中获取并与 knockoutjs 绑定
【发布时间】：2015-11-18 18:08:28
【问题描述】：

我在尝试将我的 webapi 数据与 knockoutjs 绑定时遇到问题。我相信 json 数据可以正常返回，但我不知道如何将其放入视图模型以便淘汰赛可以使用它？

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="Scripts/knockout-3.4.0.js"></script>
    <script src="Scripts/jquery-2.1.1.js"></script>
    <meta charset="utf-8" />
</head>
<body>

    <table>
        <thead>
            <tr>
                <th>Code</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: seats">
            <tr>
                <td data-bind="text: Code"></td>
                <td data-bind="text: Name"></td>
            </tr>
        </tbody>
    </table>


    <script type="text/javascript">
        function AppViewModel() {
            var self = this;
            self.seats = [];

            /*
            [
                { Code: 1, Name: "red" },
                { Code: 2, Name: "blue" }
            ];
            */

            $.get("/api/Test/Get", null, function (data) {
                //callback
                self.seats = data;
            },'json');

        }

        ko.applyBindings(new AppViewModel());
    </script>
</body>
</html>

服务器端

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace WebApplication2.Controllers
{
    public class TestController : ApiController
    {
        [HttpGet]
        public List<UserSettings> Get()
        {
            List<UserSettings> list = new List<UserSettings>();
            UserSettings userSetting  = new UserSettings() { Code = 1, Name = "Name 01" };
            list.Add(userSetting);
            return list;
        }
    }

    public class UserSettings
    {
        public int Code { get; set; }
        public string Name { get; set; }

    }
}

【问题讨论】：

标签： knockout.js asp.net-web-api

【解决方案1】：

您希望 seats 成为 observableArray。然后，巧妙地，填充它只是意味着让它成为你的 get 的成功函数：

  $.get("/api/Test/Get", null, self.seats, 'json');

下面的示例使用超时伪造get，以便您可以看到填充发生的情况。

function AppViewModel() {
  var self = this;
  self.seats = ko.observableArray();

  /*
  $.get("/api/Test/Get", null, self.seats, 'json');
  */
  setTimeout(function() {
    self.seats(
      [{
        Code: 1,
        Name: "red"
      }, {
        Code: 2,
        Name: "blue"
      }]);
  }, 800);

}

ko.applyBindings(new AppViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<table>
  <thead>
    <tr>
      <th>Code</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: seats">
    <tr>
      <td data-bind="text: Code"></td>
      <td data-bind="text: Name"></td>
    </tr>
  </tbody>
</table>

【讨论】：

有没有办法在匿名回调函数中显示返回数据？我认为它看起来像这样 $.get('/api/blah',null, function(data) { self.seats = data;}, 'json' 但显然不是。
当然，你可以调用任何你想要的函数。只是 observables 是 getter/setter，所以给它们赋值是一个函数调用，以新值作为参数。