0

在尝试了几个小时的想法之后，我无法让它发挥作用。

简单的需求：我有一个文本框（输入类型 TEXT）和一个 Div 标签：

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

理想情况下，我要做的就是在每次用户在 tb 文本框中键入新字符时更新 WordCount。

为此，我创建了一个 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 已经创建了一个实例。我不知道如何获取 ko 的 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();" />

我将不胜感激有关如何使其工作的任何建议。

4

1 回答 1

0

您可以添加一个可观察的“过滤器”并将其与输入绑定，如下所示：

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

然后在计算的'WordCount'中使用可观察的

self.WordCount = ko.computed(function () {
        var filter = this.filter();
        return CountWords(filter)
    }, this);
于 2014-02-19T15:16:08.923 回答