Как сделать readonly свойство в нокауте

Question

Я использую нокаут, и я спокоен к нему, у меня есть определенное условие, в котором я должен определить некоторые свойства только для чтения в моей модели.

и позже я хочу проверить состояние/состояние свойства, что поле доступно только для чтения или нет.

Я искал часы в Google, но не нашел подходящего решения. я нахожу это 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

Вы можете использовать enable привязки, чтобы установить элемент для инвалидов, как в данном примере, она хорошо работает для элементов формы, таких как ввод, выберите текстовое поле и .:

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

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

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 4

Хотя ответ Маурицио правильно в том, что вы должны связать логическое значение из модели представления, что отключает вход, одну потенциальную проблему с помощью «включить» связывание может быть то, что стили 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 5

Вы можете использовать этот 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" /> 

Finaly в моих 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); 
}