Нокаут шаблон не делает

Question

У меня есть 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()); 
}; 

Answer 1

Try и выполнить свой currentFolder наблюдаемого в Еогеаспе

foreach: currentFolder().files 

Answer 2

Вы должны сделать привязку данных либо с наблюдаемыми или 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» с «Еогеаспом», Нокаут ожидает currentFolder как observableArray. Таким образом, вы должны изменить вид модели следующим образом,

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

И затем нажать значения наблюдаемого массива следующим образом,

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

скрипку:http://jsfiddle.net/hV89w/12/

EDIT:

You должны изменить «currentFolder» как наблюдаемый массив. Прямо сейчас, файлы currentFolder() могут отображать то, что вы хотите. Однако это не рекомендуется. Потому что, оно не фиксирует изменения уровня файла. Я имею в виду, что пользовательский интерфейс не будет обновляться, делая currentFolder().files.push("File N").

И если вы хотите, чтобы обновить пользовательский интерфейс, то вы должны сделать, как так,

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

Этот подход делает все обновления пользовательского интерфейса. Я хочу сказать, что это будет обновлять весь пользовательский интерфейс в следующем 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> 

Answer 3

Вашего foreach связывание должно быть foreach: currentFolder().files, поскольку currentFolder является наблюдаемым, содержащим объект, и как таковое оно должно быть использовано для того, чтобы «разворачивать» его содержимое.