Knockout.js使用jQuery初始化Ajax

问题描述：

我第一次使用Knockout，它看起来非常容易，但我无法做一些简单的事情，可以做到。Knockout.js使用jQuery初始化Ajax

我的HTML文件

<tbody data-bind="foreach: LOBModel"> 
     <tr> 
      <td data-bind="text:lob_ID"></td> 
      <td data-bind="text: lob_Name"></td> 
      <td data-bind="text: lob_Description"></td> 
     </tr> 
    </tbody>

我的JS文件

$(window).load(function() { 
    getLOB(); 
    //var vm = { 
    // LOBModel: [ 
    //  { lob_ID: 'Bert', lob_Name: 'Bertington', lob_Description: 'Bertington' }, 
    //  { lob_ID: 'Charles', lob_Name: 'Charlesforth', lob_Description: 'Bertington'}, 
    //  { lob_ID: 'Denise', lob_Name: 'Dentiste', lob_Description: 'Bertington' } 
    // ] 
    //} 
    //ko.applyBindings(vm); 
    //Commented Section Work 

    function getLOB() { 
     $.ajax({ 
      url: '/Admin/GetLOB', 
      type: "POST", 
      dataType: "json", 
      success: function (returndata) { 
       alert(returndata.data); 
       var LOBModel = ko.mapping.fromJS(returndata); 
       ko.applyBindings(); 
      }, 
      error: function() { 
      } 
     }); 
    } 
});

在我的控制，我传递的数据如下

public JsonResult GetLob() 
    { 
     SLADAL objDal = new SLADAL(); 
     return Json(objDal.GetLOB()); 
    }

请帮助。

我越来越

0x800a139e - 微软JScript运行时错误：无法解析绑定。

消息：TypeError：'LOBModel'未定义;

绑定值：的foreach：LOBModel

编辑： 对于那些谁正在寻找一个完整的Ajax获取和发布实例使用对象的JSON数组，这是一个有用的链接我已经找到。希望这有助于一些身体。

网址：http://www.dotnetcurry.com/showarticle.aspx?ID=847

保持编码：d

答

要将数据绑定到视图模型，你首先必须把它作为参数传递到装订方法（我猜LOBModel是阵列），像这样：

  var LOBModel = ko.mapping.fromJS(returndata); 
      ko.applyBindings(LOBModel);

然后当你在HTML访问它以后，你将不得不使用$root关键字。

<tbody data-bind="foreach: $root"> 
    <tr> 
     <td data-bind="text:lob_ID"></td> 
     <td data-bind="text: lob_Name"></td> 
     <td data-bind="text: lob_Description"></td> 
    </tr> 
</tbody>

更伟大的例子，你总是可以采取互动教程在http://learn.knockoutjs.com/

如果你想更多的功能添加到您的视图模型，你总是可以这样创建：

  var LOBModel = ko.mapping.fromJS({ 
       data: returndata, 
       yourFunctionHere: function() { 
        ... 
       } 
      }); 
      ko.applyBindings(LOBModel);

然后您将不得不修改您的HTML看起来像，我也添加了点击事件作为如何访问在淘汰赛上下文中的视图模型的示例：

<tbody data-bind="foreach: $root.data"> 
    <tr> 
     <td data-bind="text: lob_ID, click: $root.yourFunctionHere"></td> 
     <td data-bind="text: lob_Name"></td> 
     <td data-bind="text: lob_Description"></td> 
    </tr> 
</tbody>

只是为了添加更多信息，我的json的格式是 [0] => {lob_ID：“dummy”，lob_Name：“dummy”，lob_Description“dummy”} [1] => {依此类推}我的模型将如何理解它有3个子元素 –

@RonakJain映射插件会为您处理。它会将你的数组变成一个视图模型，但我怀疑你还想将其他信息添加到视图模型中？那么你可以用你的Web服务产生的JavaScript对象进行扩展，然后再附加更多的功能......我将在答案中添加一个例子。 –

当我创建一个硬编码的Json并在我的Javascript文件中使用它时，它工作得很好（在评论部分中提到）。但是当我使用Ajax调用返回一个Object对象（Class对象）时，它只返回关键字，即[0]，[1]，[2]等，并且其值为LOB_ID和LOB_Name和Lob_Description。我不确定映射是如何工作的，但是代码面临着一些绑定问题，尽管看起来很天真 –

Knockout.js使用jQuery初始化Ajax

相关推荐