【问题标题】:How to bind checkbox value to Knockout observableArray on an object?如何将复选框值绑定到对象上的 Knockout observableArray?
【发布时间】:2015-01-21 03:19:06
【问题描述】:

我有这样的事情:

var ScheduleDay = function(day, times) {
    var self = this;
    self.day = ko.observable(day || "");
    self.times = ko.observableArray(times || []);
};

function viewModel() {
    var self = this;
    self.schedule = ko.observableArray([
        new ScheduleDay("Monday"),
        new ScheduleDay("Tuesday"),
        new ScheduleDay("Wednesday"),
        new ScheduleDay("Thursday"),
        new ScheduleDay("Friday"),
        new ScheduleDay("Saturday"),
        new ScheduleDay("Sunday")
    ])
}

ko.applyBindings(new viewModel());

<input id="mondaySchedule" type="checkbox" data-bind="checked ???">

一周中的每一天都有 3 个复选框:上午、下午和晚上。我想要一个类似的模型:schedule:{Monday:["morning","afternoon"], Tuesday:["afternoon"], etc.}

【问题讨论】:

  • 该复选框旨在存储二进制值(真/假,是/否)或一组中的一个值。您的 times 属性最初包含一个空数组,因此将这个 observable 绑定到复选框是没有意义的。你能提供更多关于你想要得到什么的细节吗?
  • 为什么一组中有一个值?单选按钮不是更多吗?一周中的每一天我都有 3 个复选框:早上、下午和晚上。我想要一个类似的模型:schedule:{Monday:["morning","afternoon"], Tuesday:["afternoon"], etc.}
  • 是的,每个复选框只会显示给定三个中的一个值。看我的回答。
  • 请编辑您的问题以添加此(重要)信息。

标签: knockout.js ko.observablearray


【解决方案1】:

由于您在 cmets 中指定了您的问题,我建议您看一下这个简单的标记,它可以满足您的需求:

<ul data-bind="foreach: schedule">
    <li>
        <strong data-bind="text: day"></strong>
        <input type="checkbox" data-bind="checked: times" value='morning' /> Morning
        <input type="checkbox" data-bind="checked: times" value='afternoon' /> Afternoon
        <input type="checkbox" data-bind="checked: times" value='evening' /> Evening
    </li>
</ul>

工作示例:http://jsfiddle.net/qjzbossb/

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-07-29
    • 2012-01-31
    • 1970-01-01
    • 2016-06-07
    • 2012-03-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多