如何在淘汰赛中取得只读属性

Question

我正在使用淘汰赛,我很安静,我有一定的条件,我必须在我的模型中定义一些只读属性.

后来我想检查该字段是只读的属性的状态/状态.

我在谷歌搜索了几个小时,但找不到合适的解决方 我发现的是这个小提琴.

var ViewModel = function() {
var self = this;
self.getDisabledState = ko.observable(null);
self.getreadonlyState = ko.observable(null);
self.enable = function() {
    if (self.getDisabledState()) self.getDisabledState(undefined);
    else self.getDisabledState('disabled');
}
self.readonly = function() {
    if (self.getreadonlyState()) self.getreadonlyState(undefined);
    else self.getreadonlyState('readonly');
  }
}

ko.applyBindings(new ViewModel());

所以我想知道是否有人帮助我.

提前致谢 .

Answer 1

虽然Maurizio的答案是正确的,你应该从视图模型中绑定一个禁用输入的布尔值,使用"启用"绑定的一个潜在问题可能是Internet Explorer样式以自己的方式禁用输入并且不允许您更改那种风​​格.这可能导致残缺的输入几乎不易辨认.

为了解决这个问题,我们创建了一个自定义绑定处理程序来设置readonly标志,并添加一个特定的样式.这会禁用输入并允许我们按照自己的方式设置样式.

这是我们添加的CSS样式:

input.disabled
{
    border: 1px solid #888; 
    color: #888; 
    height: 22px !important; 
    padding: 2px;
}

这是自定义绑定处理程序,保存在一个公共的js文件中:

ko.bindingHandlers.readonly = {
    update: function (element, valueAccessor) {
        if (valueAccessor()) {
            $(element).attr("readonly", "readonly");
            $(element).addClass("disabled");
        } else {
            $(element).removeAttr("readonly");
            $(element).removeClass("disabled");
        }
    }
};

然后,这只是在HTML中应用绑定的问题,如下所示:

<input type="text" data-bind="value: MyValue, readonly: MyBoolean" />

Answer 2

我刚刚写的一个小扩展器

http://jsfiddle.net/cpsct/

ko.extenders.readonly = function(target, readonly) {
    var computed = ko.computed({
        read: target,
        write: function(value) {
            if(!computed.canWrite())
                throw "Observable in read only mode"

            target(value);
        }
    });

    computed.canWrite = ko.observable(!readonly);
    return computed;
};

更新: 如果它是一个保护模式,我可以推荐查看我的lib Knockout.BindingConventions

示例 http://jsfiddle.net/QzZPg/2/(在文本框中禁用写入)