Блог

В моем представлении knockoutjs я хочу установить некоторые наблюдаемые операторы с помощью кода вместо объявления его в html.

Допустим, в html я могу это сделать:

 <div data-bind="style: { color: someValue() >= 0 ? '' : 'red' }"></div>
  

Где someValue() не является наблюдаемым в ViewModel. Всякий раз, когда someValue() изменяется, выполняется правило и цвет элемента автоматически изменяется. Все в порядке, это работает.

Но я хочу настроить это правило в коде, а не в html. Я хочу что-то вроде этого (концепция — это всего лишь образец):

 <div data-bind="style: style"></div>
<script>
var viewModel =
{
    style: someValue() >= 0 ? '' : 'red' //<-- how make it observable?
}
</script>
  

Заметил, что это только что оценено, и стиль будет сохранять «или «красный». Не то, что я хочу приобрести. Я хочу, чтобы это оценивалось как изменения someValue(), супер просто, как это делает способ html.

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

Есть ли?

Это то, для чего ko.computed и ko.pureComputed предназначены:

 var someValue = ko.observable(0);

// All observables used in a computed will trigger changes
var style = ko.computed(function() {
  return someValue() > 0 ? 'not-red' : 'red';
});

// Log if it is actually observable:
console.log(ko.isObservable(style));

// Log its initial value
console.log(style());

// Subscribe to changes in our computed
style.subscribe(function(newValue) {
  console.log(newValue);
});

// Changing one of the computed's dependencies will result
// in the subscription being triggered and a log to console
someValue(2);  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>  

Используйте следующее в вашей модели представления.

     self = this;
    self.someValue = ko.observable(1); // default observable's value
    self.changeRed = function () {
        return someValue() >= 0 ? '' : 'red';
    };
  

Ваш HTML-код будет выглядеть следующим образом.

 <div data-bind="style: { color: changeRed() }"></div>
  

И всякий раз, когда вы обновляете свой observable, например, call self.someValue(-1); в вашей модели представления, ваш браузер будет отражать изменения.

Обновить

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