Question

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

以后我想检查该字段是否为只读的属性的状态/状态。

我在谷歌搜索了几个小时，但找不到合适的解决方案。我发现的是fiddle。

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的回答是正确的，你应该从视图模型中绑定一个禁用输入的布尔值，但是使用＆＃34;启用＆＃34;绑定可以是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/（在文本框中写禁用）

Answer 3

你可以使用这个binginHandlers：

ko.bindingHandlers.readOnly = {
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        if (value) {
            element.setAttribute("disabled", true);

        } else {
            element.removeAttribute("disabled");
        }
    }
};

在我的HTML中：

<input type="text" id="create-finess" class="form-control" data-bind="readOnly: _locked" />

最后在我的JS中：

//Constructor of my view model

  function ViewModel(resx) {
       this._locked = ko.observable();
}

  // on init of the page i lock the input
 this._load = function () {
  this._locked(true);
}

Answer 4

    html code:
  <input type="text" data-bind="value:SkuAttributeValue1,readOnly: IsAudit" class="form-control" />
 knockoutjs code:
    function ProductSkuItemModel(item) {
var self = this;
self.SkuAttributeValue1 = ko.observable(item.SkuAttributeValue1);
self.SkuAttributeValue2 = ko.observable(item.SkuAttributeValue2);
self.ProductSkuId = ko.observable(item.ProductSkuId);
self.SkuAttributeValue =ko.observable(skuAttributeName1 + ":" +      item.SkuAttributeValue1 + " " + skuAttributeName2 + ":" + item.SkuAttributeValue2);
self.IsAudit = ko.observable(false);
        }
   ko.bindingHandlers.readOnly = {
            update: function(element, valueAccessor) {
                var value = ko.utils.unwrapObservable(valueAccessor());
                //alert(value);

                if (!value) {
                    element.setAttribute("readOnly", true);
                } else {
                    element.removeAttribute("readOnly");
                }
            }
        };

Answer 5

您可以使用enable绑定将元素设置为禁用，就像在此示例中一样，它适用于输入，选择和textarea等表单元素。：

<p>
    <input type='checkbox' data-bind="checked: hasCellphone" />
    I have a cellphone
</p>
<p>
    Your cellphone number:
    <input type='text' data-bind="value: cellphoneNumber, enable: hasCellphone" />
</p>

<script type="text/javascript">
    var viewModel = {
    hasCellphone : ko.observable(false),
    cellphoneNumber: ""
};
</script>

淘汰赛文档：http://knockoutjs.com/documentation/enable-binding.html

稍后如果要检查元素的状态，只需读取hasCellphone() observable的值。

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

5 个答案: