knockout.js, asp.net mvc4 - 使用 getJSON 数据更新简单视图模型答案

【问题标题】：knockout.js, asp.net mvc4 - update simpel viewmodel with getJSON dataknockout.js, asp.net mvc4 - 使用 getJSON 数据更新简单视图模型
【发布时间】：2012-09-08 00:08:51
【问题描述】：

这是一个新手问题，更不用说我对 knockout.js 很陌生。我要做的就是从服务器获取单个种植者（姓名、公司、地址）的详细信息并将其显示在网页上。我使用的是 $(document).bind('pageinit', function ()，因为我使用的是 jQuery mobile。

现在我的代码是：

    <h3><span data-bind="text: Name"></span></h3>
    <span data-bind="text: Company"></span><br />
    <span data-bind="text: Address"></span>

    <script type="text/javascript">

       $(document).bind('pageinit', function () {

         function MyGrowerModel() {
            //this.Name = "My Name";
            //this.Company = "My Company";
            //this.Address = "My Address";

            //Load initial state from server, convert it to Task instances, then  opulate self.tasks
            $.getJSON("Grower/GetGrower", function (allData) {

             this.Name = allData.Name;
             this.Company = allData.Company;
             this.Address = allData.Address;
             alert(allData.Name); //works!
         });
        }

        ko.applyBindings(new MyGrowerModel());

       });
       </script>

我收到“无法解析绑定。消息：ReferenceError：名称未定义；绑定值：名称

这是有道理的，因为 Name、Company 和 Address 都在 getJSON 函数的范围内。那么，我的问题是，在哪里声明这些变量以及如何更新这些 ViewModel 数据？

我不想使用映射插件。

感谢任何帮助。

【问题讨论】：

这真是令人费解。 Royce Feng 或 Michael Berkompas 给出的解决方案都不适合我。即使我可以看到数据来自服务器（警报消息正确显示名称），我在绑定 ViewModel 属性的地方也得到了空白值。还有什么问题？
查看我的答案的最新编辑。看看那个代码 sn-p 是否适合你。

标签： jquery-mobile knockout.js asp.net-mvc-4

【解决方案1】：

你会想要使用observable properties。这样，一旦您的 $.getJSON 请求完成，您的视图将使用新数据进行更新。

<h3><span data-bind="text: Name"></span></h3>
<span data-bind="text: Company"></span><br />
<span data-bind="text: Address"></span>

<script type="text/javascript">

    function MyGrowerModel() {
        var self = this;
        self.Name = ko.observable('');
        self.Company = ko.observable('');
        self.Address = ko.observable('');

        self.Name.subscribe(function(newValue) {
            alert("Name has changed: " + newValue);
        });

        //Load initial state from server and populate viewmodel
        $.getJSON("Grower/GetGrower", function (allData) {
             self.Name(allData.Name);
             self.Company(allData.Company);
             self.Address(allData.Address);
        });
    }

   $(document).bind('pageinit', function () {
        ko.applyBindings(new MyGrowerModel());
   });
</script>

【讨论】：

非常感谢！有效。为什么“通常”的方法在这里失败了？
文本等敲除绑定可以很好地绑定普通对象属性，但不会在这些属性更改时更新。通过将这些属性声明为 ko.observable，您可以解决这个难题。

【解决方案2】：

您需要保留对该对象的引用：

function MyGrowerModel() {
    var self = this;
    //Load initial state from server, convert it to Task instances, then populate self.tasks
    $.getJSON("Grower/GetGrower", function (allData) {
         self.Name = allData.Name;
         self.Company = allData.Company;
         self.Address = allData.Address;
    });
}

不过，这不是唯一的问题。 $.getJSON 默认情况下是异步的，您可以设置async: false 或更改回调函数以应用绑定。更好的解决方案是使用 observables：

function MyGrowerModel() {
    var self = this;
    self.Name = ko.observable(''); // Value shown before getJSON returns
    self.Company = ko.observable('');
    self.Address = ko.observable('');
    //Load initial state from server, convert it to Task instances, then populate self.tasks
    $.getJSON("Grower/GetGrower", function (allData) {
         self.Name(allData.Name);
         self.Company(allData.Company);
         self.Address(allData.Address);
    });
}

这将首先为每个名称、公司和地址显示空字符串，并将自动更新为从getJSON 调用返回的数据。

【讨论】：