2013-05-27 3 views
0

Мне нужно написать и прочитать проверочное связывание радиообъектов по-разному, как это возможно с помощью computedBinding. Я не хочу испортить ViewModel с ComputedObservables для каждого радиообмена. Поэтому я пытаюсь контролировать привязку текста привязки в разметке. Возможно, с примерами он становится яснее.Двунаправленное проверочное связывание в тексте привязки (например, computedObeservable)

Пример: Пользователь должен иметь возможность установить значение с помощью устройства. Он может выбрать устройство и установить значение. Существуют общие значения, которые пользователь должен иметь возможность выбирать (Radiobuttons). Тем не менее, должно быть возможно написать конкретное значение (ввод). Вот разметка (Мое упоминание выражается через «привязки» checked-read, cheacked-write).

<label><input type="radio" name="valuRadios" data-bind="text: ' 0.08' + unitValue().Unit().shortName() + ' ', checked-write: function (value) { value ? unitValue.Value(0.08) : null; }, checked-read: function() { return unitValue.Value() == 0.08 }" /></label> 
<label><input type="radio" name="valuRadios" data-bind="text: ' 0.25' + unitValue().Unit().shortName() + ' ', checked-write: function (value) { value ? unitValue.Value(0.25) : null; }, checked-read: function() { return unitValue.Value() == 0.25 }" /></label> 
... 
<div class="input-append"> 
    <input type="text" data-bind="value: unitValue().Value"> 
    <span class="add-on" ata-bind="text: unitValue().Unit().shortName()"><span> 
</div> 

Возможно ли это как можно?

ответ

2

Если вы устанавливаете атрибут value на свои радиовходы, то выбивка будет устанавливать наблюдаемое на нем. Из примера, который вы опубликовали, я считаю, что вы должны использовать стандартную привязку checked к наблюдаемому. Что-то вроде:

<div data-bind="foreach: values"> 
    <input type="radio" name="valuRadios" value="0.25" data-bind="attr: { value: $data }, checked: $parent.myValue" /> 
    <label data-bind="text: $data"></label> 
</div> 

<input data-bind="value: myValue" /> 

<div data-bind="text: myValue"><div> 

с JS из:

ko.applyBindings({ 
    values: [0.08, 0.025, 0.15], 
    myValue: ko.observable(0.08) 
}); 

образца здесь: http://jsfiddle.net/rniemeyer/zPgwA/

Если сценарий является немного более сложным, то стратегия, которую я хотел бы использовать это, чтобы создать пользовательский привязка, которая генерирует вычисление на основе исходного наблюдаемого, а затем привязывается к элементу с этим новым вычисленным чем-то вроде:

ko.bindingHandlers.specialChecked = { 
    init: function(element, valueAccessor) { 
     var original = valueAccessor(); 

     var filter = ko.computed({ 
      read: function() { 
       //return original() or some modified version of it 
      }, 
      write: function(newValue) { 
       //write to original(newValue) or modify newValue first 
      }, 
      disposeWhenNodeIsRemoved: element 
     }); 

     ko.applyBindingsToNode(element, { checked: filter }); 
    } 
}; 
+0

Спасибо! Хорошо, это было проще, чем я думал. Кроме того, стратегия с пользовательской привязкой в ​​моей ситуации не нужна, но, тем не менее, это хороший пример. Спасибо. Может быть, это поможет мне позже. – GiCo

Смежные вопросы