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

时间:2014-12-15 09:36:40

标签: javascript data-binding knockout.js sharepoint-2010

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

我有一个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);
});

这是我的ViewModel:

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);

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

你能帮助我吗?

由于

1 个答案:

答案 0 :(得分:1)

有两个原因:

  1. 因为ajax回调中的this不是您的viewmodel。如果您愿意,请使用bind

  2. 因为您正在用原始属性替换您的observable。而是设置可观察的值

  3. 所以:

        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,我建议通过Knockout tutorials,因为这是KO最基本的方面之一。


    附注:不要使用eval来解析JSON。使用JSON.parse解析JSON。或$.parseJSON