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

Question

我正在创建一个输入字段，它在按下按键时更新一个 div。因此，如果用户在输入字段中键入“test”，div 将填充文本“test”。

这非常简单并且工作正常。但是，我需要它为多个单词创建多个 div。因此，如果用户键入“hello world”，将创建两个 div - 一个用于“hello”，一个用于“world”。

我该怎么做？

如果有帮助，我已经设置了一个 JS Fiddle:

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

这是我的 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 模板绑定(bind)中调用该模板。参见 Template Binding .

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

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

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