Knockout viewModel Property

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

Простая необходимость: у меня есть текстовое поле (тип ввода TEXT) и тег Div:

<body>
    <input id="tb" type="text"/>
    <div id="Words" data-bind="text: WordCount"></div>
</body>

В идеале все, что я хочу сделать, это обновлять WordCount каждый раз, когда пользователь вводит новый символ в текстовое поле tb.

Чтобы сделать это, я создал ViewModel:

function ViewModel() {
    var self = this;
    self.recalcFlag = ko.observable();

    self.WordCount = ko.computed(function () {
        self.recalcFlag();
        return CountWords($("#tb").wijinputtext("option", "text"))
    }, this);

    self.recalcWordCount = function () {
        self.recalcFlag.notifySubscribers();
    }
}

Используемая мной функция CountWords выглядит следующим образом:

function CountWords(inputString) {

    var splitArray = inputString.split(" "), obj = {};

    for (var x = 0; x < splitArray.length; x++) {
        if (obj[splitArray[x]] === undefined) {
            obj[splitArray[x]] = 1;
        } else {
            obj[splitArray[x]]++;
        }
    }

    return splitArray.length;
}

Приведенная выше методика - это решение, которое я видел в другом посте SO - способ получения вычисленного значения ko для обновления / обновления по требованию. Идея состоит в том, чтобы вызвать recalcWordCount из функции нажатия клавиши. Но проблема в том, что моя функция recalcWordCount находится внутри моего объекта ViewModel - и Knockout уже создал экземпляр этого. Я не знаю, как добраться до экземпляра Ко ViewModel для вызова функции. Например, это не работает:

<input id="tb" type="text" onkeypress="recalcWordCount();" />

Кроме того, это не работает:

<input id="tb" type="text" onkeypress="ViewModel.recalcWordCount();" />

Кроме того, это не работает:

<input id="tb" type="text" onkeypress="ko.viewModel.recalcWordCount();" />

Буду признателен за любые предложения о том, как я могу заставить это работать.

1 ответ

Решение

Вы можете добавить наблюдаемый "фильтр" и связать его с помощью ввода следующим образом:

  <input data-bind="value: filter, valueUpdate: 'afterkeydown'" />

а затем использовать наблюдаемое в вычисленном "WordCount"

self.WordCount = ko.computed(function () {
        var filter = this.filter();
        return CountWords(filter)
    }, this);
Другие вопросы по тегам