在开始之前,我想指出,这是使用html / js和淘汰赛的第零天,所以我可能只是误解了它们如何一起工作。
我做了一个简单的测试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>
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());
编辑:我已经更改了代码,现在警报确实可以工作,但是html绑定仍然没有更新。
最佳答案
您已将currentMember
声明为可观察的。要设置可观察值,您需要将其作为函数调用。因此,请尝试使用self.currentMember(serviceResponse.body)
。如果像您一样执行self.currentMember = seviceResponse.body
,则实际上将currentMember
变量重新定义为常规的不可观察变量。
检查documentation以获得进一步的说明。