Question

我有一个viewModel，它包含一个可观察的folder对象（在初始化时未定义）

我有一个foreach模板，应该显示该文件夹的文件，但该文件无效。

HTML

<div data-bind="template: { if: currentFolder(), foreach: currentFolder.files }">
    <div style="padding: 10px; border: 1px solid #000; background-color: #f0f0f0">
        <span data-bind="text: $data"></span>
    </div>
</div>

<button type="button" id="button">Set current folder</button>

的Javascript

var viewModel = {
    currentFolder: ko.observable()
};
ko.applyBindings(viewModel);

document.getElementById('button').onclick = addCurrentFolder;

function addCurrentFolder() {
    var folder = {
        files: [ "File 1", "File 2", "File 3" ]
    };
    viewModel.currentFolder(folder);

    // does nothing

    console.log(viewModel.currentFolder());
};

Answer 1

您的foreach绑定需要为foreach: currentFolder().files，因为currentFolder是包含对象的可观察对象，因此需要调用它以“解包”其内容。

Answer 2

您必须使用observable或observableArray进行数据绑定。我为你创造了小提琴。

你的html代码应该如下，

<div data-bind="foreach: currentFolder">
    <div style="padding: 10px; border: 1px solid #000; background-color: #f0f0f0">
        <span data-bind="text: $data"></span>
    </div>
</div>

由于我将“currentFolder”与“foreach”绑定，因此淘汰赛期望currentFolder成为一个可观察的阵营。所以你必须按如下方式改变视图模型，

var viewModel = {
    currentFolder: ko.observableArray()
};

然后将值推送到可观察数组，如下所示，

viewModel.currentFolder.pushAll([ "File 1", "File 2", "File 3" ])

小提琴： http://jsfiddle.net/hV89w/12/

编辑：

您必须将“currentFolder”更改为observableArray。现在，currentFolder（）。文件可以呈现你想要的。但是，不建议这样做。因为，它不会捕获文件级别的变化。我的意思是，UI在做currentFolder().files.push("File N")时不会更新。

如果您想更新UI，那么您必须按照以下步骤进行操作，

var folder = currentFolder();
folder.files.push("File N");
viewModel.currentFolder(folder);

这种方法是让所有UI刷新。我的意思是，这将刷新以下HTML中的整个UI。这个过程被认为是更昂贵的。

<div data-bind="foreach: currentFolder">
    <div style="padding: 10px; border: 1px solid #000; background-color: #f0f0f0">
        <span data-bind="text: $data"></span>
    </div>
</div>

Answer 3

尝试并执行foreach中的currentFolder observable

foreach: currentFolder().files

Knockout模板不呈现

3 个答案: