knockout.js - 如何构建具有字符计数器和最大长度的文本区域？

Question

请考虑this jsfiddle 。它包含以下内容:

<textarea data-bind="value: comment, valueUpdate: 'afterkyedown'"></textarea>

<br/><br/>
<span data-bind="text: getCount, valueUpdate: ['afterkeydown','propertychange','input']"></span> characters???

还有这个 JavaScript:

var viewModel = function(){
    var self = this;

    self.count = ko.observable(0);
    self.comment = ko.observable("");
    self.getCount = function(){
        var countNum = 10 - self.comment().length;
        self.count(countNum);
    };
}

var viewModel12 = new viewModel();
ko.applyBindings(viewModel);

我有一个文本区域，最大长度应为 20 个字符。当字符数达到20时，它将停止，如果您尝试添加更多字符，它们将被删除。

请注意，这也适用于复制/粘贴:如果用户粘贴超过 20 个字符，则仅保留前 20 个字符，其余的应删除。

Answer 1

看看this jsfiddle ，其工作原理如下:

var viewModel = function(){
    var self = this;

    self.comment = ko.observable("");
    self.count = ko.computed(function(){
        var countNum = 10 - self.comment().length;
        return countNum
    });
}

var vm = new viewModel();
ko.applyBindings(vm);

<textarea data-bind="value: comment, valueUpdate: 'afterkeydown'"></textarea>
<br/><br/>
<span data-bind="text: count"></span> characters​​​​​​​

您需要了解ko.computed()做这种事情...