Привязка кендо видна противоположному значению

Question

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

Например:нормальным поведением является показ <div>, который имеет контент, которым пользователь должен манипулировать как часть «шага».Я хочу дать пользователю возможность пропустить этот шаг.Для этого я добавляю флажок «пропустить» и в нем привязываю его значение к свойству IsSkip:

<input id="checkbox-allow-skip" type="checkbox" data-bind="value: IsSkip" />

Могу ли я затем связать видимость <div> с противоположностью IsSkipкак это (псевдокод для привязки данных):

<div id="optional-step" data-bind="visible: !IsSkip">
  <!-- ... -->
</div>

Редактировать - я полагаю, что, возможно, стоит отметить, что в настоящее время я генерирую событие onchange для флажка и устанавливаю значениеновое свойство с именем CannotSkip , противоположное IsSkip и связывающее видимость с CannotSkip .

Answer 1

Как вы, вероятно, уже знаете, вы не можете инвертировать значение свойства в вашем выражении привязки в соответствии с вашим псевдокодом из-за способа построения привязки.Однако ссылка visible, которая появляется в выражении привязки, не является ссылкой на атрибут DOM, это на самом деле ссылка на связыватель кендо, который имеет аналог, invisible связыватель , который инвертирует значениедля тебя.Следовательно, простейшее решение вашей проблемы заключается в следующем:

<div id="optional-step" data-bind="invisible: IsSkip">
  <!-- ... -->
</div>

В конце концов, однако, вы обязательно столкнетесь с ситуацией, когда это не решит проблему для вас, например, видимость зависит от состояниянесколько флагов?Этот тип сценария лучше всего обрабатывается путем привязки к функции, где вы можете выполнить любую необходимую логикуСамое важное, что нужно помнить, когда вы используете этот подход, это манипулировать любыми свойствами вашей модели представления, используя методы get и set наблюдаемого объекта.Это гарантирует, что любые привязки к вашей функции будут обновлены при изменении любого из этих свойств;на языке кендо это известно как зависимый метод .Вы можете решить свою проблему, используя этот подход, например так:

var viewModel = kendo.observable({
  IsSkip: false,
  CannotSkip: function() {
    return !this.get("IsSkip");
  }
});

<div id="optional-step" data-bind="visible: CannotSkip">
  <!-- ... -->
</div>