不能老是让JSON对象与淘汰赛 [英] Can`t get json object to with knockout

问题描述

我不能老是让JSON对象。

I can`t get json object.

我的目标是：

public class Person
{
   public string firstName { get; set; }
   public string lastName { get; set; }        
}

PersonsControll：

PersonsControll:

    public ActionResult Index()
    {
        return View();
    }

    // GET: /Persons/GetPerson
    //[AcceptVerbs(HttpVerbs.Get)]
    //[OutputCache(Duration = 0, VaryByParam = "*")]
    public JsonResult GetPerson()
    {
        Person p = new Person { firstName = "Jonas", lastName = "Antanaitis" };
        return Json(p, JsonRequestBehavior.AllowGet);
    }

我的索引视图：

@Scripts.Render("~/bundles/knockout")

<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

<div id="dispJson"></div>
<script type="text/javascript">                
    var data = $.getJSON(".../GetPerson", function (result) {
        //state = result.readyState;
        firstName: result.firsName;
        lastName: result.lastName;
    })    
    .error(function () { alert("error"); });    

    function viewModel() {
        ko.mapping.fromJS(data);
        //state = data.readyState;
        //firstName = data.firstName;
        //lastName = data.lastName;
    };    
    document.write(JSON.stringify(data)); //this line prints  "{"readyState":1}"

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

当我去... / GetPerson浏览器，我得到这个显示：
{名字：乔纳斯，姓氏：Antanaitis}

When I go to ".../GetPerson" in browser, I get this displayed: {"firstName":"Jonas","lastName":"Antanaitis"}

，但是当试图让数据女巫的JavaScript鉴于 - 我dont`t得到这个数据

,but when try to get data witch javascript in view - I dont`t get this data.

什么我做错了，为什么我不能得到的数据？
凡评论code - 我试过这个方法..但没有任何帮助。

What I am doing wrong, why I cant get data? Where commented code - I tried this approaches.. but nothing helped.

我试过：

*$.ajax({
    type: "GET",
    cache: false,
    url: ".../GetPerson",        
}).done(function (msg) {
    alert("Data Saved: " + msg.readyState + "  " + msg.firstName + "  " + msg.lastName);
});*

然后提示框显示：数据保存：未定义乔纳斯Antanaitis 的

推荐答案

您在混合异步code与同步code ...在这里你有这行

You are mixing async code with sync code... You have this line here

var data = $.getJSON(".../GetPerson", function (result) {

数据实际上是一个承诺（这是ajax的回报）。你不实际拥有的数据，直到回调执行 - 即结果是有实际数据的东西。

data will actually be the a promise (this is what the ajax returns). You do not actually have the data until the callback executes - ie result is the thing that has the ACTUAL data.

您需要移动的结合内部的回调，或者使用一个可观察的，你在事后设置：

You need to move the binding to INSIDE the callback OR use an observable that you set after the fact:

1）里面的回调例子

<script type="text/javascript">                
    $.getJSON(".../GetPerson", function (result) {

        function viewModel() {
            return ko.mapping.fromJS(result);
        };

        ko.applyBindings(new viewModel());
    })    
    .error(function () { alert("error"); });        
</script>

2）使用可观察

2) Use an observable

<script>
    function viewModel() {
        return { data: ko.observable() };
    };

    // Your html bindings will bind to data.* instead of just *
    ko.applyBindings(new viewModel());

    $.getJSON(".../GetPerson", function (result) {
        data(ko.mapping.fromJS(result));
    })    
    .error(function () { alert("error"); });      
</script>

和相应的HTML（该用结合使得它比如果清洁了一下）：

And the corresponding html (The with binding makes it a bit cleaner than if):

<!-- ko with: data -->
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>
<!-- /ko -->

第二个方法的优点是，你很快约束力的一切......然后可以显示你的数据，因为它的用武之地。

The advantage of the second method is that you are binding everything quickly... and can then show your data as it comes in.

这篇关于不能老是让JSON对象与淘汰赛的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！