使用敲除检查绑定与单选按钮的问题

时间:2014-08-04 15:18:26

标签: knockout.js

我正在尝试使用已检查的绑定但它似乎不起作用。我已经尝试过stackoverflow中提到的类似问题的解决方案,但没有一个有效。

我通过jquery ajax获取模型。我在c#代码中有模型,我在UI中绑定。 我也通过jquery ajax保存数据。具有值数据绑定的元素似乎有效,但使用单选按钮检查的绑定显示为空且未更新。

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>&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>

2 个答案:

答案 0 :(得分:0)

请参阅此小提琴以获得完整答案http://jsfiddle.net/32UU6/

您的代码存在两个问题。 一种是使用with绑定的方式。更新该行以显示类似的内容

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

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

其次,NamePrefix应该是一个可观察的,现在它是纯JavaScript值,所以双向绑定不起作用。对此进行修复既可以使用ko.mapping插件,也可以简单地使其成为可观察对象,并在AJAX调用成功后为其分配值。

另外一件事,只有当NamePrefix具有与我们在单选按钮value属性中指定的完全相同的值时,使用单选按钮进行绑定才有效。因此,如果单选按钮值与NamePrefix值匹配,则将选中该单选按钮。

答案 1 :(得分:0)

这个问题是由于我使用的zurb基础而不是淘汰赛。 我注释了zurb基础表单中单选按钮切换的代码,一切正常。