一台收音机没有被选中?

时间:2012-09-03 17:53:32

标签: asp.net-mvc knockout.js

我更改了approch,现在,我正确选择了无线电值。

问题:初始化时选择了我的一个收音机(首先载入然后用户可以更改选择),但是第一次没有选择收音机,如何正确初始化“已选择”?

@model Demo.Web.ViewModels.HomeViewModel
@{
   ViewBag.Title = "Two Page";
}
@using (Html.BeginForm("Index", "Two", FormMethod.Post, new Dictionary<string, object> { { "data-bind", "submit:onSubmit" } }))
{

<table>
    <tr>
        <td>
            <div data-bind="foreach: items">
                <input type="radio" name="items" data-bind="attr: { value: id }, checked: $root.selected" />
                <span data-bind="text: name"></span>
            </div>
            <div data-bind="text: selected">
            </div>
        </td>
    </tr>
</table>

<input type="submit" name="send" value="Send" />
}

<script type="text/javascript">
var viewModel = {
    items: [
    { "id": 1, "name": "one", "selected": false  },
    { "id": 2, "name": "two", "selected": true },
    { "id": 3, "name": "three", "selected": false }
],
selected: ko.observable(),

    onSubmit: function(){                

        var x = this.selected();

        }
    };     

$(function() {                        
        ko.applyBindings(viewModel);
    });

1 个答案:

答案 0 :(得分:0)

当绑定类型为radio的输入时,Knockout中的checked绑定会尝试将输入值写入绑定的任何值。这个想法是你所有的无线电都绑定了相同的可观测量。

类似的东西:

var viewModel = {
    items: [
        { id: 1, name: "one"  },
        { id: 2, name: "two" },
        { id: 3, name: "three" }
    ],
    selected: ko.observable()
};

绑定到像:

这样的用户界面
<div data-bind="foreach: items">
    <input type="radio" name="items" data-bind="attr: { value: id }, checked: $root.selected" />
    <span data-bind="text: name"></span>
</div>

<div data-bind="text: selected"></div>

示例:http://jsfiddle.net/rniemeyer/BbX4S/

因此,在您的情况下,您应该能够将您的无线电绑定到$root.IsSelected并使用它而不是循环遍历这些项目。

初始化时,您可能希望查看是否选中了任何按钮,然后正确填充根级IsSelected