使用 jQuery Ajax 进行 Knockout.js 初始化

Question

我是第一次使用 Knockout，它看起来非常简单，但我无法做一些可以完成的简单事情。

我的 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 - Microsoft JScript 运行时错误：无法解析绑定。

消息：TypeError：“LOBModel”未定义；

绑定值：foreach: LOBModel

编辑： 对于那些正在寻找使用 JSON 对象数组的完整 Ajax Get 和 Post 示例的人，这是我找到的一个有用的链接。希望这对身体有所帮助。

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

继续编码：D

Answer 1

要将数据绑定到视图模型，您首先必须将其作为参数传递给绑定方法（我猜 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>