2012-03-16 33 views
18

这使我困惑。它一定是我看不到的小东西。我正在尝试使用ajax调用加载非常简单的observableArray淘汰赛。从.ajax()调用knockout.js observableArray()调用

的JavaScript

// we bind the array to the view model property with an empty array. 
var data = []; 
var viewModel = { 
    vendors: ko.observableArray(data) 
}; 
ko.applyBindings(viewModel); 

$(function() { 
    // on this click event, we popular the observable array 
    $('#load').click(function() { 
     // WORKS. Html is updated appropriately. 
     viewModel.vendors([{ "Id": "01" },{ "Id": "02" },{ "Id": "03" }]); 

     // DOES NOT WORK. Fiddler2 shows the same exact json string come back 
     // as in the example above, and the success function is being called. 
     $.ajax({ 
      url: '/vendors/10', 
      dataType: 'json', 
      success: function (data) { 
       viewModel.vendors(data); 
      } 
     }); 
    }); 
}); 

HTML

<button id="load">Load</button> 
<ul data-bind="template: { foreach: vendors }"> 
    <li><span data-bind="text: Id"></span></li> 
</ul> 

问:为什么成功的Ajax调用,谁的data变量值相匹配的字节为字节硬盘键入的值,不会触发h tml刷新?

回答

11

有没有理由这将无法正常工作。如此演示。

http://jsfiddle.net/madcapnmckay/EYueU/

我会检查AJAX后真的返回JSON数据,并且该JSON是一个数组,并且它被正确解析。

我不得不调整ajax调用来让小提琴ajax处理程序正常工作。

没有什么我能想到的。

希望这会有所帮助。

+0

感谢验证我的理智......我再仔细一点。也许MVC吸一点包装或什么... – 2012-03-16 05:51:09

+0

叶。 Firebug请求响应,验证您正在获取json,然后验证jquery是否将其解析为对象。 – madcapnmckay 2012-03-16 05:55:34

+0

它是肯定的json ... C#代码看起来像'return Json(list,JsonResponseBehavior.AllowGet);'其中'list'是一个ICollection所以我知道它是JSON。除此之外,Fiddler2可以正确显示其JSON视图中的数据......它在JavaScript的某处。当我在工作时,我会在明天再次发布更多信息 – 2012-03-16 05:58:07

-3

这是错误,我认为,淘汰赛的样品工作时,我们用它来与包装类:

public class ResultWrapper 
{ 
    public Title {get;set;} 
    public List<Result> {get;set;} 
} 

http://learn.knockoutjs.com/#/?tutorial=webmail

但是,如果我们返回结果直接就没有办法来约束它。 (无需额外applyBindings!)

0
var self=this; 
//var self first line in model 

$.ajax({ 
      url: ", 
      dataType: "json", 
      contentType: 'application/json', 
      type: "POST", 
      data: JSON.stringify({ }), 
      processdata: true, 

      beforeSend: function() { 
       $.mobile.loading('show'); 
      }, 

      error: function (xhr, textStatus, errorThrown) { 
       alert('Sorry!'); 
      }, 

      success: function (data) { 

       $.mobile.loading('hide'); 
       if (data.result!= '') { 
        self.vendors(data.result); 



       } else { 
        self.vendors({something}); 

       } 
      } 
     }); 

使用self.vendors不是这个viewModel.vendors

-2

我太晚就这一个,因为我发现自己陷在这种情况下,刚刚结束。 我们可以使用一个简单的Javascript util函数作为解决方法。

代替viewModel.vendors(data);,我们可以使用

eval("viewModel.vendors("+JSON.stringify(data)+");");... 

它为我工作。

0

这是我在我的MVC .net应用程序中用knockout和jquery完成的。

// Scripts/groItems.js 
 
(function() { 
 

 
    var ViewModel = function() { 
 
     items = ko.observableArray(), 
 
      ItemName = ko.observable(), 
 
      Img = ko.observable(), 
 
      Qty = ko.observable() 
 
    } 
 

 
    $.getJSON('/Items2/AllItems', function (data) { 
 
     for (var i = 0; i < data.length; i++) { 
 
      self.items.push(data[i]); 
 
     } 
 
    }); 
 

 
    var vm = new ViewModel(); 
 

 
    $(function() { 
 
     ko.applyBindings(vm); 
 
    }); 
 

 
}());
@model IEnumerable<GroModel.Item> 
 
@{ 
 
    ViewBag.Title = "Index"; 
 
} 
 

 
<p> 
 
    @Html.ActionLink("Create New", "Create") 
 
</p> 
 

 
<div data-bind="text: items().length"></div> 
 
<table class="container table table-hover"> 
 
    <thead> 
 
     <tr> 
 
      <th>Item name</th> 
 
      <th>img</th> 
 
      <th>qty</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody data-bind="foreach: items"> 
 
     <tr> 
 
      <td data-bind="text: ItemName"></td> 
 
      <td data-bind="text: Img"></td> 
 
      <td data-bind="text: Qty"></td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 

 
@section Scripts { 
 
    <script src="~/Scripts/knockout-3.4.2.js"></script> 
 
    <script src="~/Scripts/groItems.js"></script> 
 
}

以下是我在Items2Controller代码的一部分。CS

private GroContext db = new GroContext(); 
    public JsonResult AllItems() 
    { 
     return Json(db.Items.ToList(), JsonRequestBehavior.AllowGet); 
    } 

enter image description here

希望这会有所帮助。谢谢