KnockoutJS没有显示选择

时间:2013-10-27 13:13:09

标签: javascript html knockout.js

我正在尝试使用选择菜单来显示在外部脚本表中创建的列表中的选项。清单:

window.list = [
        {
            Name: 'Male',
            Value: 1,
            notApplicable: 'me'
        },
        {
            Name: 'Female',
            Value: 2,
            notApplicable: 'me'
        },
        {
            Name: 'Not Specified',
            Value: 3,
            notApplicable: 'me'
        }
        ];

HTML:

<li>
  <label for="5">Sex</label>
  <select name="" id="5" data-bind="options: list, optionsText: 'Name', optionsValue: 'Value', optionsCaption: 'Choose',  value: user.SELECT"></select>
</li>

在浏览器中显示时,下拉菜单不显示标题,也不显示下拉选项。这是一个注册页面,用户将选择他们的性别。

1 个答案:

答案 0 :(得分:2)

您是否在控制台中收到错误?如果视图模型没有user.SELECT属性,则绑定将失败。我添加了一个user.SELECT属性,它似乎可以工作:http://jsfiddle.net/BEEuQ/1/

HTML:

<select name="" id="5" data-bind="options: list, optionsText: 'Name', 
    optionsValue: 'Value', optionsCaption: 'Choose', 
    value: user.SELECT"></select>

JS:

var vm = {
    list : [ { Name: 'Male', Value: 1, notApplicable: 'me' }, { Name: 'Female', Value: 2, notApplicable: 'me' }, { Name: 'Not Specified', Value: 3, notApplicable: 'me' } ],
    user:{
        SELECT:ko.observable()
    }
}

ko.applyBindings(vm)

此外,您可能不希望将数据直接放在窗口对象上。全局在Javascript中很糟糕。创建命名空间(对象)并将所有内容放在那里。