Knockout.js 使用单选按钮取消选中绑定的问题

Knockout.js 使用单选按钮取消选中绑定的问题,knockout.js,Knockout.js,我试图使用检查绑定,但它似乎不起作用。我曾经尝试过stackoverflow中提到的解决类似问题的方法,但都没有成功 我通过jQueryAjax获取模型。我在UI中绑定的c代码中有模型。 我还通过jQueryAjax保存数据。具有值数据绑定的元素似乎可以工作,但选中的带有单选按钮的绑定显示为null,并且不会被更新 var LoginInformationModel = function () { LoginInformation = ko.observable();

我试图使用检查绑定,但它似乎不起作用。我曾经尝试过stackoverflow中提到的解决类似问题的方法,但都没有成功

我通过jQueryAjax获取模型。我在UI中绑定的c代码中有模型。 我还通过jQueryAjax保存数据。具有值数据绑定的元素似乎可以工作,但选中的带有单选按钮的绑定显示为null,并且不会被更新

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#中的模型:

HTML:


前缀:
先生
夫人
太太

请参阅此小提琴以获取完整答案

您的代码有两个问题。 一种是将
绑定一起使用的方式。更新该行以显示如下内容

<div id="content" class="container" data-bind="with: LoginInformation">

请注意,在
LoginInformation
之后,我们没有
()

其次,
nameprifix
应该是一个可观察的值,现在它是纯JavaScript值,所以双向绑定不起作用。解决这个问题的方法是,您可以使用
ko.mapping
插件,或者简单地将其设置为可观察的,并在AJAX调用成功后为其赋值


还有一件事,只有当
nameprifix
的值与我们在单选按钮
value
属性中指定的值完全相同时,使用单选按钮的绑定才会起作用。因此,如果单选按钮值与NAMEPROFIX值匹配,那么将选择那个单选按钮。

< P>这个问题是由于ZURB基金会使用的,而不是用KokOut. 我注释了ZURB基金会表单中单选按钮切换的代码,所有的工作都很好。

<div id="content" class="container" data-bind="with: LoginInformation()">
    <div class="row">
        <div class="four columns">
            <label>&nbsp;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>
<div id="content" class="container" data-bind="with: LoginInformation">