Question

我正在使用KnockoutJS进行数据绑定。以下代码是控制器的操作方法

public JsonResult GetPeople()
{
    var people = new List<Person>
                     {
                         new Person {Name = "aaaa", Address = "aaaaaaaaa"},
                         new Person {Name = "bbbb", Address = "bbbbbbbbb"},
                         new Person {Name = "cccc", Address = "ccccccccc"}
                     };
    return Json(people, JsonRequestBehavior.AllowGet);
}

而bellow是客户端代码的片段

<ul data-bind="foreach: people">
  <li>NAME:<span data-bind="text: Name"></span></li>
  <li>ADDRESS:<span data-bind="text: Address"></span></li>  
</ul>

<script>
    function getPeopleFromServer() {
        var people= [];

        $.ajax({
            url: "GetPeople",
            cache: false,
            type: "GET",
            success: function (result) {
                console.log("result= " + result);
                people = $.parseJSON(result);
                console.log("people= " + people);
            }
        });

        return people;
    }

    function ViewModel() {
        var self = this;

        // data
        self.people = ko.observableArray(getPeopleFromServer());        
    }

    ko.applyBindings(new ViewModel());
</script>

问题是getPeopleFromServer方法中的人变量始终为null，而结果具有来自服务器的正确值。我错过了什么吗？

Answer 1

你的$.ajax函数需要比它包含函数更长的时间来完成，因此包含函数永远不会在执行结束时弹出people

您可以做的一件事是将以下内容添加到$.ajax：

$.ajax({
   async: false,
   url: "GetPeople",
   .....
});

async: false将使包含函数“等待”直到ajax完成。您的people var应该在函数执行结束时填充。虽然这是一个快速的胜利，但我同意Tom您应该重新考虑如何处理您的ViewModel。

Answer 2

人们应该在同一个视图模型中被引用。或者作为自我人。我建议你在视图模型中调用ajax然后就可以了。所以getPeopleFromServer（）应该在viewmodel中。

您也可以添加兴趣超时：600000，以便呼叫不会超时。

Answer 3

尝试使用ko.mapping插件。

function ViewModelWrapper(jsonResult)
{
       var self = this;
       self.model = ko.mapping.fromJS(jsonResult);
}

http://knockoutjs.com/documentation/plugins-mapping.html

Answer 4

@ tom的评论是正确的。

'success'是内联异步函数。基本上，'返回人'在调用'success'函数之前发生，因为ajax调用是非阻塞的。您需要重新设计ViewModel才能异步工作（或关闭异步），希望其他人可以使用代码修复工具

这是他预言的完全评论的小提琴。

http://jsfiddle.net/bczengel/8Wqum/

如何将JSON数组转换为JavaScript数组？

4 个答案: