Knockoutjs没有绑定到元素

时间:2013-11-19 16:07:25

标签: data-binding knockout.js

我是KnockoutJS的新手并尝试使用它。

我无法使用knockoutjs绑定元素。请参阅下面的小提琴并帮助解决和纠正我。

它基本上没有将值绑定到span元素。

http://jsfiddle.net/EpyRA/

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

先谢谢, 萨姆

1 个答案:

答案 0 :(得分:1)

我看到了一些小问题:

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

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