Knockoutjs 未绑定到元素答案

【问题标题】：Knockoutjs not binding to elementKnockoutjs 未绑定到元素
【发布时间】：2013-11-19 16:07:24
【问题描述】：

我对 KnockoutJS 有点陌生，正在尝试使用它。

我在使用 knockoutjs 绑定元素时遇到问题。请参阅下面的小提琴并帮助解决和纠正我。

基本上是不绑定值到span元素上。

HTML：

<div id="taxyear">
    <table style="width: 100%;" cellpadding="4" cellspacing="4">
        <tr>
            <td style="width: 25%">
                <span>Name:</span><span data-bind="value: ReturnData.Name"></span>
            </td>

        </tr>
    </table>
</div>

Javascript：

      var myWeb = myWeb || {};
$(function () {
    (function (myWeb) {
        "use strict";
        var serviceBase = '../Services/Data.asmx/',
    getSvcUrl = function (method) { return serviceBase + method; };
        myWeb.ajaxService = (function () {
            var ajaxGetJson = function (method, jsonIn, callback) {
                $.ajax({
                    url: getSvcUrl(method),
                    type: "GET",
                    data: jsonIn,
                    dataType: "json",
                    contentType: "application/json",
                    success: function (json) {
                        callback(json);
                    }
                });
            },


        ajaxPostJson = function (method, jsonIn, callback) {
            var test = { "Name": "testRaju", "SourceID": "ABCD" };
            //just return data instead of calling for testing
             callback(test);
        };
            return {
                ajaxGetJson: ajaxGetJson,
                ajaxPostJson: ajaxPostJson
            };
        })();
    } (myWeb));
    (function (myWeb) {
        "use strict";
        myWeb.DataService = {
            getReturnData: function (jsonIn, callback) {
                myWeb.ajaxService.ajaxPostJson("GetReturnData", jsonIn, callback);
            }
        };
    } (myWeb));

    //Constructor for a ReturnData object
    myWeb.ReturnData = function () {
        this.Name = ko.observable();
        this.SourceID = ko.observable();

    },

    //View Model
    myWeb.prdviewmodel = (function () {
        var prd = ko.observable();
        loadReturnDataCallback = function (jsonReturnData) {
            alert(jsonReturnData.Name);
           prd = new myWeb.ReturnData()
            .Name(jsonReturnData.Name)
            .SourceID(jsonReturnData.SourceID);

        },
        loadReturnData = function () {
            myWeb.DataService.getReturnData("{'YearID':'" + 22 + "'}", myWeb.prdviewmodel.loadReturnDataCallback);
        };
        //public
        return {
                        loadReturnData: loadReturnData,
            loadReturnDataCallback: loadReturnDataCallback,
            ReturnData: prd

        }
    })();
    //hookup knockout to our viewmodel
    myWeb.prdviewmodel.loadReturnData();
    ko.applyBindings(myWeb.prdviewmodel);
});

提前致谢，山姆

【问题讨论】：

标签： data-binding knockout.js

【解决方案1】：

我发现了几个小问题：

绑定span 时，您可能希望使用text 绑定而不是value 绑定。
在 AJAX 回调中，您可能希望通过将 prd observable 的值作为函数调用来设置它，而不是将其设置为新值。
在 UI 中，您可以使用 with 绑定来确保它在加载之前不会尝试绑定到可观察对象的属性。

这是一个更新的小提琴：http://jsfiddle.net/rniemeyer/Bdz5a/

【讨论】：

谢谢，我应该检查一下。非常感谢。