Knockout模板不呈现

时间:2013-12-12 08:57:55

标签: javascript jquery knockout.js knockout-2.0

我有一个viewModel,它包含一个可观察的folder对象(在初始化时未定义)

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

jsfiddle

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());
};

3 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:0)

您必须使用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>

答案 2 :(得分:0)

尝试并执行foreach中的currentFolder observable

foreach: currentFolder().files