我试图使用检查绑定,但它似乎不起作用。我已经尝试了在stackoverflow中提到的类似问题的解决方案,但没有一个有效。
我通过jquery ajax获得模型。我有模型在c#代码,我绑定在UI。我还通过jquery ajax保存数据。具有值数据绑定的元素似乎可以工作,但是带有单选按钮的checked绑定显示为空并且没有更新。
var LoginInformationModel = function () {
LoginInformation = ko.observable();
$.ajax({
async: false,
type: "GET",
url: "Login.svc/GetLogin",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
if (msg.Login != undefined) {
LoginInformation(msg.Login);
}
},
error: function (xhr, status, error) {
alert('error:' + xhr.responseText) }
//log('error calling Login.svc: ' + xhr.responseText);
}
});
}
ko.applyBindings(LoginInformationModel);
c#中的模型:
public class Login
{
string namePrefix;
public string NamePrefix {
get { return namePrefix; }
set { namePrefix = value; }
}
}
HTML: <div id="content" class="container" data-bind="with: LoginInformation()">
<div class="row">
<div class="four columns">
<label> Prefix:</label>
</div>
<div class="fourteen columns custom-label">
<label for="prefixMr">
<input type="radio" class="input-display-none"
id="prefixMr" name="NamePrefix" value="Mr."
data-bind="checked: NamePrefix"/>
<span class="custom radio"></span>Mr.
</label>
<label for="prefixMrs">
<input type="radio" class="input-display-none"
id="prefixMrs" name="NamePrefix" value="Mrs."
data-bind="checked: NamePrefix"/>
<span class="custom radio"></span>Mrs.
</label>
<label for="prefixMs">
<input type="radio" class="input-display-none"
id="prefixMs" name="NamePrefix" value="Ms."
data-bind="checked: NamePrefix"/>
<span class="custom radio"></span>Ms.
</label>
</div>
</div>
</div>
查看完整答案http://jsfiddle.net/32UU6/
你的代码有两个问题。一个是使用with
绑定的方式。更新该行以显示如下内容
<div id="content" class="container" data-bind="with: LoginInformation">
注意LoginInformation
之后没有()
。
第二,NamePrefix
应该是一个可观察的,现在它是普通的JavaScript值,所以双向绑定将不工作。修复这个问题,你可以使用ko.mapping
插件或简单地使它成为一个可观察对象,并在AJAX调用成功后赋值给它。
还有一件事,只有当NamePrefix
的值与我们在单选按钮value
属性中指定的值完全相同时,与单选按钮的绑定才会起作用。因此,如果单选按钮值与NamePrefix值匹配,那么该单选按钮将被选中。
这个问题是由于我使用的zurb基础而不是knockout。我注释掉了zurb基础表单中单选按钮切换的代码,一切都很好。