1

I am creating an input field which updates a div on keypressdown. So, if the user types 'test' into the input field, the div is populated with the text 'test'.

This is pretty simple and working fine. However, I need it to create multiple divs for multiple words. So, if the user types 'hello world' there will be two divs created - one for 'hello' and one for 'world'.

How do I go about this?

I've set up a JS Fiddle if that helps:

http://jsfiddle.net/dYK3n/60/

This is my JS:

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

ko.applyBindings(viewModel);

All help appreciated.

Thanks in advance.

4

3 回答 3

4

这是一个工作小提琴。

首先，您需要能够从计算出的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() 方法。

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，我们需要使用一个模板。进一步阅读H​​tml 模板。

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

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

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

为了获取原始文本，我们使用$dataand 为了从我们使用的根模型中获取 css 样式$root。请参阅绑定上下文。

data-bind="css: $root.style, text: $data"
于 2013-05-29T18:27:45.040 回答
0

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

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

于 2013-05-29T17:54:34.813 回答
0

这是一个小提琴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>

抱歉，我没有时间进行更好的解释，如果您有问题，我会尽快回答

于 2013-05-29T18:35:36.703 回答