<script src="http://jsblocks.com/blocks/0.3.2/blocks.js"></script>
<script type="text/javascript">
(function (blocks, undefined) {
var App = blocks.Application();
function keydown(e) {
if (e.which === 13) {
this.folders.add(this.newFolder);
this.newFolder.reset();
}
}
var SubFolder = App.Model({
name: App.Property(),
editing: blocks.observable(false),
toggleEdit: function () {
this.editing(!this.editing());
},
remove: function () {
this.destroy(true);
console.log("remove");
}
});
var Folder = App.Model({
name: App.Property(),
folders: App.Collection(SubFolder)(),
editing: blocks.observable(false),
toggleEdit: function () {
this.editing(!this.editing());
},
remove: function () {
this.destroy(true);
},
newFolder: SubFolder(),
addSubfolder: keydown
});
var Folders = App.Collection(Folder);
App.View("Folders", {
newFolder: Folder(),
folders: Folders(),
keydown: keydown
});
})(window.blocks);
</script>
<div id="folders" data-query="view(Folders)">
<input type="text" id="addFolderInput" data-query="val(newFolder.name).keydown(keydown)" placeholder="Add new folder and press enter" />
<div data-query="each(folders)">
<div class="folder">
<span data-query="visible(!editing())" class="folderName">
{{name}}
</span>
<span data-query="visible(editing)">
<input type="text" data-query="val(name)" />
</span>
<span class="buttons">
<span data-query="click(toggleEdit).setClass('icon-checkmark', editing).setClass('icon-pencil', !editing())"></span>
<span data-query="click(remove)" class="icon-bin"></span>
</span>
<div id="newSubfolder">
<input type="text" id="addSubfolder" data-query="val(newFolder.name).keydown(addSubfolder)" placeholder="Add new subfolder and press enter" />
</div>
<div id="subfolders" data-query="each(folders)">
<div class="folder">
<span data-query="visible(!editing())" class="folderName">
{{name}}
</span>
<span data-query="visible(editing)">
<input type="text" data-query="val(name)" />
</span>
<span class="buttons">
<span data-query="click(toggleEdit).setClass('icon-checkmark', editing).setClass('icon-pencil', !editing())"></span>
<span data-query="click(remove)" class="icon-bin"></span>
</span>
</div>
</div>
</div>
</div>
</div>
results in any subfolder created for any folder to populate a new folder.