Question

我正在创建一个输入字段，用于更新keypressdown上的div。因此，如果用户在输入字段中键入“test”，则div将填充文本“test”。

这很简单，工作正常。但是，我需要它为多个单词创建多个div。因此，如果用户输入'hello world'，将会创建两个div - 一个用于'hello'，一个用于'world'。

我该怎么做？

如果有帮助的话，我已经设置了一个JS小提琴：

这是我的JS：

var viewModel = {
    styleChoices: ["yellow", "red", "black", "big"],
    style: ko.observable("yellow"),
    text: ko.observable("text"),
};

ko.applyBindings(viewModel);

所有帮助表示赞赏。

提前致谢。

Answer 1

Here's a working fiddle

首先，您需要能够从computed observable内部引用您的viewModel才能使其正常工作，因此我将其更改为函数。

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

通过将viewModel标识为变量，我们可以为其分配属性，就像您在javascript对象样式中所做的那样。

self.styleChoices =  ["yellow", "red", "black", "big"];
self.style = ko.observable("yellow");
self.textField = ko.observable("new text");

我将您的文本对象重命名为textField，仅用于关键字区分。现在您选择使用原始数组文本。在将来使用对象可能是明智的，但是现在这是一个简单的字符串拆分。请参阅split() method。

self.textItem = ko.computed(function() {
    var txt = self.textField();
    var result = [];
    if (txt != null && txt.length > 0)
    {
        result = txt.split(" ");
    }
    return result;
});

我使用了Knockout Computed函数，因此需要从其他字段中获取值。最后，为了根据这个新计算数组中的项目数重现这个div，我们需要使用一个模板。进一步阅读Html Templates。

<script type="text/html" id="text-template">
    <div class="phrase" data-bind="css: $root.style, text: $data"></div>
</script>

我们从foreach模板绑定中调用该模板。请参阅Template Binding。

<div data-bind="template: { name: 'text-template', foreach: textItem }"></div>

为了获取原始文本，我们使用$data，为了从根模型中获取css样式，我们使用$root。请参阅Binding Context。

data-bind="css: $root.style, text: $data"

Answer 2

我不明白为什么你应该使用KnockOut。

只需使用split（）方法拆分空格并将结果放入数组中。遍历该数组并为数组中的每个单词创建一个div。

Answer 3

这是一个小提琴http://jsfiddle.net/dYK3n/81/

var ViewModel = function(){
var self = this;enter code here
this.styleChoices= ["yellow", "red", "black", "big"],
this.style = ko.observable("yellow"),
this.text = ko.observable("new text"),
this.numberOfWords = ko.computed(function(){
    return self.text().split(" ").length;
}),
this.getWordFromIndex = function(index){
    return self.text().split(" ")[index];
}
};

ko.applyBindings(new ViewModel());




<div data-bind="foreach:new Array(numberOfWords())">
 <div class="phrase" data-bind="text:$parent.getWordFromIndex($index()),css:$parent.style"></div>   
</div>

抱歉，我没有时间进行更好的解释，如果你有问题我可以回答他们

来自新手的Knockout JS查询 - 需要帮助

3 个答案: