Question

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

简单需要：我有一个文本框（INPUT类型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();" />

如果有任何关于如何使其发挥作用的建议，我将不胜感激。

Answer 1

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

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

然后使用计算出的'WordCount'中的observable

self.WordCount = ko.computed(function () {
        var filter = this.filter();
        return CountWords(filter)
    }, this);

Knockout viewModel属性

1 个答案: