nombre de mots dans knockoutjs ne fonctionne pas correctement - jquery, knockout.js

J'ai une simple zone de texte pour laquelle j'essaie de compter les mots:

<textarea rows="20" id="inputText" data-bind="textInput: inputText"></textarea>

<p>Total words: <span id="totalWords" data-bind="text: wordCount"></span></p>

quand jquery utilise le nombre de mots fonctionne parfaitement:

//get the count of words
var val = $.trim($("textarea").val()),
words = val.replace(/s+/gi, " ").split(" ");
$("#totalWords").html(words.length);

mais quand j'essaie de faire cela dans knockoutjs, il commence à 1 et s'incrémente lorsque la première lettre du mot suivant est saisie:

function appViewModel() {

this.inputText = ko.observable("");

this.wordCount = function () {
var val = $.trim(this.inputText());
var words = val.replace(/s+/gi, " ").split(" ");
return words.length;
};

...

}

ko.applyBindings(new appViewModel());

En fin de compte, j'aimerais pouvoir obtenir le tableau de mots en utilisant quelque chose comme:

  this.words = function () {
var val = $.trim(this.inputText());
var words = val.replace(/s+/gi, " ").split(" ");
return words;
};

puis utilisez une fonction distincte pour le compte:

this.wordCount = ko.computed(function(){
return this.words.length;
});

parce que je veux effectuer d'autres actions sur le tableau de mots, telles que la liste et le nombre de mots dupliqués.

Réponses:

Essaye ça:

function appViewModel() {
this.inputText = ko.observable("");
this.words = function() {
return this.inputText().trim().split(" ").filter(function(w) { return !!w; });
};
};

ko.applyBindings(new appViewModel());

HTML:

<textarea rows="20" id="textInput" data-bind="textInput: inputText"></textarea>
<p>Total words: <span id="totalWords" data-bind="text: words().length"></span></p>

Voir Violon

Quelque chose comme ça:

function appViewModel() {
var self = this;
this.inputText = ko.observable("");

this.wordCount = ko.computed(function () {
var val = self.inputText();
var words = val.split(/s+/).filter(function (item) {
return item.length > 0;
});
return words.length;
});

}

ko.applyBindings(new appViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<textarea rows="10" id="inputText" data-bind="textInput: inputText"></textarea>
<p>Total words: <span id="totalWords" data-bind="text: wordCount"></span>
</p>
<p data-bind="text: inputText"></p>