Question

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

我构建了一个样本小提琴，用于解释基本结构: http://jsfiddle.net/JL26Z/60/

我必须找出一些必须根据状态启用/禁用文本框的内容。

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

案例2：如果我的状态值为3，我需要第一个文本框，禁用最后一个文本框，留下第二个文本框可编辑

案例3 如果除了我上面提到的任何其他状态值之外我还需要让它们全部可编辑。

我必须使用一些绑定属性来实现这个我尝试使用

attr:{disable:true}或attr:{disable:false}但这不会帮助我，我必须做一些非常规的事情，如果/其他。

非常感谢任何建议

Answer 1

使用子视图模型，使用ko.computed确定每个复选框的状态。这为视图和视图模型提供了最大的代码清晰度。

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/

Answer 2

您可以使用enable绑定任意语句来确定是否启用或禁用输入字段。

例如，在您的情况下，您将更改

<input type="text" data-bind="value:Code" />

到

<input type="text" data-bind="value:Code, enable:status == 1 || status == 2" />

如果status为1或2，则Code的输入字段将被禁用;否则，它允许输入。

This edit of your Fiddle包含enable绑定的简单用法，在Knockout文档中为explained officially。

TextBox启用动态禁用使用knockout observable？

2 个答案: