jquery - TextBox 的启用禁用动态使用 knockout 观察？

Question

我正在尝试在具有三个文本框类型控件的 div 上运行循环。

我构建了一个示例 fiddle 来解释基本结构 : http://jsfiddle.net/JL26Z/60/

我必须解决一些问题，我必须根据状态启用/禁用文本框。

情况 1: 如果我的状态值为 1 或 2，则应禁用整行，即应禁用所有 3 个文本框

情况 2:如果我的状态值为 3，我需要禁用第一个文本框和最后一个文本框，而使第二个文本框可编辑

情况 3:如果它具有除我上面提到的之外的任何其他状态值，我只需将其全部设置为可编辑即可。

好吧，我必须利用一些绑定(bind)属性来实现这一点，我尝试使用

attr:{disable:true} 或 attr:{disable:false} 但这对我没有帮助，我必须做一些非常规的 if/else 。

非常感谢任何建议

Answer 1

使用 subview 模型，通过ko.compulated确定每个复选框的状态。这在 View 和 View 模型中提供了最大程度的代码清晰度。

function PhoneNumberViewModel(data) {
    var self = this;
    self.code = ko.observable(data.Code);
    self.date = ko.observable(data.Date);
    self.status = ko.observable(data.status);
    self.disableCode = ko.computed(function () {
        var s = self.status();
        return s === "1" || s === "2"  || s === "3";
    });
    self.disableDate = ko.computed(function () {
        var s = self.status();
        return s === "1" || s === "2";
    });
    self.disableStatus = ko.computed(function () {
        var s = self.status();
        return s === "1" || s === "2"  || s === "3";
    });
}
PhoneNumberViewModel.create = function (data) {
    return new PhoneNumberViewModel(data);
};
function PhoneViewModel(phoneNumbers) {
    var self = this;
    self.phoneList = ko.observableArray(
        ko.utils.arrayMap(phoneNumbers, PhoneNumberViewModel.create)
    );
}

// -------------------------------------------------------------------
ko.applyBindings(new PhoneViewModel([
    {Code: "123", Date: "12/12", status: "1"},
    {Code: "345", Date: "10/12", status: "2"},
    {Code: "567", Date: "7/7", status: "3"},
    {Code: "789", Date: "4/9", status: "4"}
]));

和

<div data-bind="foreach: phoneList">
    <label>Country Code:</label> <input type="text" data-bind="value: code, disable: disableCode" />
    <label>Date:</label> <input type="text" data-bind="value: date, disable: disableDate" />
    <label>Status:</label> <input type="text" data-bind="value: status, disable: disableStatus" />
    <br />
</div>

注释:

• JavaScript 中普遍接受的约定是仅在对象构造函数中使用 PascalCase，而对其他所有内容都使用 camelCase。也请考虑以这种方式编写代码。
• 您可能想查看 mapping plugin它可以帮助您将原始数据映射到(在本例中)PhoneNumberViewModel。
• 从用户体验的角度来看，使 Status 字段的“禁用”状态取决于其自身的值并不是最明智的做法。

参见:http://jsfiddle.net/JL26Z/63/