Можете ли вы заставить KnockoutJS переоценить привязки?

Question

Я использую KnockoutJS и MVVM на странице, и большинство, если это работает, но у меня возникают проблемы с переоценкой всех привязок.Например, у меня есть кнопка, которую я хочу включить при соблюдении определенных критериев:

<input type="submit" value="Purchase" data-bind="{enable: IsPurchaseValid}" />

IsPurchaseValid - это вычисляемая функция моей модели представления:

viewModel.IsPurchaseValid = ko.computed(function() {
console.log("IsPurchaseValid: function entered...");

if (this.Duration() == null ||  this.Total() <= 0 || this.SelectedPackageId() < 0) {
    console.log("IsPurchaseValid: Something is missing...");
    return false;
}

return this.IsLocalityCountValid();
}, viewModel);

Кнопка правильно отключенакогда страница загружается, но никогда не переоценивается.IsLocalityCountValid - это еще одна вычисляемая функция, и операторы console.log указывают, что она возвращает true.Консоль Chrome не показывает ошибок сценариев.

Как получить привязку включения для правильной переоценки?У меня также есть диапазон с видимой привязкой к! IsLocalityCountValid, который никогда не становится видимым.Я чувствую, что упускаю что-то простое, но не могу понять, что это может быть.

Answer 1

У меня есть очень простое repro для включения, где оно работает. (см. скрипку ниже)

Я предлагаю вам проверить свой CSS. Я столкнулся с этой проблемой однажды, потому что я как-то удалил свою кнопку: отключенный стиль. У меня был стиль для кнопки, который изменил цвет фона и цвет шрифта, но как-то я убрал кнопку: стиль отключен .... итоговый результат был таким, что при отключении он выглядел точно так же, как и при включении.

В любом случае, вы можете проверить кнопку включения / выключения здесь: Вы можете проверить это здесь: http://jsfiddle.net/johnpapa/wLKS6/

Проблема не случилась со мной, когда нет CSS, чтобы вмешиваться. Таким образом, ключ может заключаться в том, чтобы убедиться, что ваши CSS-классы ведут себя первыми.

Answer 2

Я только что заметил, что ваш оператор привязки данных заключен в фигурные скобки:

data-bind="{enable: IsPurchaseValid}"

Попробуйте без фигурных скобок:

data-bind="enable: IsPurchaseValid"

Answer 3

Вы упоминаете, что IsLocalityCountValid изменилось на true, но вы не упомянули, изменилось ли Duration на non- null, Total изменилось на >0 и SelectedPackageId до >=0. Если ни одно из них не изменится, Knockout не будет повторно оценивать computed, потому что он возвратил false, прежде чем оценивать IsLocalityCountValid. Подробнее см. http://knockoutjs.com/documentation/computedObservables.html#how_dependency_tracking_works.

Answer 4

Это может быть случай, когда при оценке KO вашего вычисленного значения не видны все наблюдаемые значения, и, следовательно, он не знает, когда следует переоценить вычисленное значение.

Например, если KO видит, что this.Duration не имеет значение null, он может не оценить другие наблюдаемые в вашем блоке if и, следовательно, может не знать о необходимости переоценки вашего вычисленного значения в случае изменения этих других наблюдаемых.

Попробуйте это для размера, посмотрите, работает ли оно:

viewModel.IsPurchaseValid = ko.computed(function() {
   console.log("IsPurchaseValid: function entered...");

   // Evaluate all dependent observables up front.
   // This will let KO know which observables this computed value is dependent on.
   var duration = this.Duration();
   var total = this.Total();
   var packageId = this.SelectedPackageId();
   var islocalityCountValid = this.IsLocalityCountValid();
   if (duration == null || total <= 0 || packageId < 0) {
       console.log("IsPurchaseValid: Something is missing...");
       return false;
   }

   return isLocalityCountValid;
}, viewModel);

Answer 5

Итак, похоже, что это на самом деле ошибка. В исходном коде, если вы связываете его с типом ввода «submit», он не работает, но если вы связываете его с «кнопкой» типа ввода, он работает. Я отправил его в группу Google KnockoutJS.

EDIT : Я собираюсь принять это как ответ, но в JSFiddle обе кнопки и отправить работу. Я предполагаю, что должны быть некоторые конфликты между библиотеками jquery, так как у меня есть несколько других библиотек, работающих на реальном сайте.