0

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

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

我在 Google 上搜索了几个小时，但没有找到合适的解决方案。我发现的是这个小提琴。

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());

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

提前致谢 。

4

5 回答 5

8

尽管 Maurizio 的回答是正确的，因为您应该从禁用输入的视图模型中绑定一个布尔值，但使用“启用”绑定的一个潜在问题可能是 Internet Explorer 以自己的方式设置禁用输入的样式，并且不允许您更改那种风​​格。这可能导致难以辨认的禁用输入。

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

这是我们添加的 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" />
于 2014-08-08T08:46:49.690 回答
5

我刚刚写的一个小扩展器

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;
};

更新： 如果它是一个守卫模式，我可以建议您查看我的库 Knockout.BindingConventions

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

于 2013-08-12T08:31:13.090 回答
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);
}
于 2015-05-07T12:16:58.893 回答
1 
    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");
                }
            }
        };
于 2013-12-10T04:04:42.307 回答
-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 的值。

于 2013-08-12T08:26:42.273 回答