为什么我的数据绑定不起作用

Why my data-binding doesn't work?

本文关键字：不起作用数据绑定我的为什么更新时间：2023-09-26

我正在开发一个SharePoint 2010 Web 部件。我会使用挖空框架进行数据绑定。

我有一个带有此代码的 ascx：

    <table>
        <tr>
            <td>
                <label id="lblLastMaintenanceDate">Data ultima manuntenzione:</label>
            </td>
            <td>
                <span id="lastMaintenanceDate" data-bind="text: lastMaintenanceDate"></span>
            </td>
        </tr>
        <tr>
            <td>
                <label id="lblMaintenanceDescription">Descrizione manuntenzione:</label>
            </td>
            <td>
                <span id="MaintenanceDescription" data-bind="text: maintenanceDescription"></span>
            </td>
        </tr>
        <tr>
            <td>
                <label id="lblConcept">Concept:</label>
            </td>
            <td>
                <span id="Concept" data-bind="text: concept"></span>
            </td>
        </tr>
    </table>

在 document.ready（）中，我编写了以下代码：

$(document).ready(function () {
    ko.applyBindings(ShopViewModel);
});

这是我的观点模型：

var ShopViewModel = {
lastMaintenanceDate : ko.observable(),
maintenanceDescription : ko.observable(),
concept : ko.observable(),
GetShopDetail : function (val1) {
$.ajax({
        type: "GET",
        url: "../_layouts/MyProject/MasterPage.aspx/GetDetails?par1=" + val1,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: "{}",
        cache: false,
        async: false,
        success: function (result) {
            var oJson = eval("(" + result['d'] + ")");
            if (oJson.Success) {
                var result = oJson.Data;
                if (result) {
                    this.lastMaintenanceDate = String(result.LastMaintenanceDate);
                    this.maintenanceDescription = String(result.MaintenanceDescription);
                    this.concept = String(result.SyConceptId);
                }
            }
            else {
                WriteToConsole(oJson.Error);
                customAlert(oJson.Error, "Error");
            }
        }
    })
}

}

我用这段代码调用GetShopDetail函数：

ShopViewModel.GetShopDetail(val1);

我的问题是数据绑定不起作用。

你可以帮我吗？

谢谢

两个原因：

因为 ajax 回调中的this不是视图模型。如果需要，请使用bind
因为您要将可观察量替换为原始属性。相反，设置可观察量的值

所以：

    success: function (result) {
        var oJson = eval("(" + result['d'] + ")");
        if (oJson.Success) {
            var result = oJson.Data;
            if (result) {
                // ************** Change on next three lines
                this.lastMaintenanceDate(String(result.LastMaintenanceDate));
                this.maintenanceDescription(String(result.MaintenanceDescription));
                this.concept(String(result.SyConceptId));
            }
        }
        else {
            WriteToConsole(oJson.Error);
            customAlert(oJson.Error, "Error");
        }
    }.bind(this)     // <===== Change here

Re #2，我建议完成淘汰教程，因为这是KO最基本的方面之一。

旁注：不要使用 eval 来解析 JSON。使用 JSON.parse 解析 JSON。或者$.parseJSON.