我的绑定有什么问题？

Question

我的绑定有什么问题？

McD*_*ean 1 javascript html5 knockout.js

在我们开始之前,我想指出使用html/js和knockout这是第零天所以我可能只是误解了它是如何一起工作的.

我做了一个简单的测试webapi,所以我可以抓住淘汰赛.到目前为止,这一切都在起作用,但对于<span data-bind="text:currentMember().name"></span>我似乎无法开展工作的约束.

这页纸

<!DOCTYPE html>
<html>
<head>
    <title>Test page</title>
    <script src="Scripts/knockout-2.2.1.js"></script>
    <script src="Scripts/jquery-2.0.0.js"></script>
    <script src="Scripts/ViewModels/indexViewModel.js" defer="defer"></script>
</head>
<body>
    <div id="Content">
        <section>
            <p>Member Number: </p>  <input id="memberNumber" type="text" />
            <p>Pin: </p>  <input id="memberPin" type="text" />
            <input type="submit" value="Get" data-bind="click: getMember" />
        </section>
        <span data-bind="text:currentMember().name"></span>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

ViewModel

function IndexViewModel() {
var self = this;

self.currentMember = ko.observable();

self.getMember = function () {

    var memberNumber = $('#memberId').val();
    var memberPin = $('#memberPin').val();

    if (memberNumber == '' || memberPin == '') {
        memberNumber = '372-001100-134';
        memberPin = '123456';
    }

    $.ajax({
        dataType: "json",
        url: "http://localhost:25979/api/members/GetMemberByNumberAndPin",
        data: {
            memberNumber: memberNumber,
            pin: memberPin
        },
        success: function (serviceResponse) {
            if (!serviceResponse.hasAlerts) {
                self.currentMember(serviceResponse.body);
                alert(self.currentMember().name);
            }
        }
    });
};
}

ko.applyBindings(new IndexViewModel());

Run Code Online (Sandbox Code Playgroud)

编辑:我已经更改了代码,现在警报确实有效,但html绑定仍未更新.

Answer 1

Nil*_*lsH 5

您已声明currentMember为可观察的.要设置observable的值,需要将其作为函数调用.所以试试吧self.currentMember(serviceResponse.body).如果你这样self.currentMember = seviceResponse.body做,你将基本上将currentMember变量重新定义为常规的非可观察变量.

查看文档以获取进一步说明.

@McDonnellDean你需要使用一个空对象`self.currentMember = ko.observable({})来初始化你的observable;`因为默认情况下它是未定的,当你的绑定`text:currentMember().name`被解析时它会尝试在未完成时调用`name`会抛出错误.您可以在浏览器的javascript控制台中看到错误. (2认同)

归档时间：	12 年，9 月前
查看次数：	68 次
最近记录：	12 年，9 月前