1

这是一个新手问题，更不用说我对 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 数据？

我不想使用映射插件。

任何帮助表示赞赏。

4

2 回答 2

3

你会想要使用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>
于 2012-09-14T20:35:07.850 回答
1

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

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这将最初为每个名称、公司和地址显示空字符串，并将自动更新为调用返回的数据。

于 2012-09-14T20:29:19.817 回答