I try to write by my own a Knockout application in which are available nested arrays.
I'm trying to create a Bootstrap modal window which will help me to add a new item of embedded List.
I create the everything but unfortunately the new item is always added to the last array.
Any idea what I'm doing wrong?
What I wrote for now is available on JSFiddle
JS
ko.bindingHandlers.showModal = {
init: function (element, valueAccessor) {
$(element).modal({ backdrop: 'static', keyboard: true, show: false });
},
update: function (element, valueAccessor) {
var value = valueAccessor();
if (ko.utils.unwrapObservable(value)) {
$(element).modal('show');
$("input", element).focus();
}
else {
$(element).modal('hide');
}
}
};
function Task(data) {
this.family = ko.observable(data.family); }
var personModel = function() { self = this; self.people =
ko.observableArray([
new testModel("Person",["one","two","three"]),
new testModel("Person2",["one2","two2","three2"]),
new testModel("Person3",["one3","two3","three3"])
]); }
function TaskItem(data) {
this.family = ko.observable(data);
}
var testModel = function(name,children){
self = this;
self.itemToAdd = ko.observable("");
self.name = name;
self.items = ko.observableArray([]);
for(var i = 0; i<children.length;i++){
self.items.push(new TaskItem(children[i]));
}
self.currentItem = ko.observable();
self.newTaskText = ko.observable();
self.displaySubmitModal = ko.observable(false);
self.showModal = function(){
self.displaySubmitModal(true);
};
self.closeSubmitModal = function(){
self.displaySubmitModal(false);
self.newTaskText("");
};
// Operations
self.addTask = function() {
self.items.push(new Task({ family: this.newTaskText() }));
self.newTaskText("");
self.displaySubmitModal(false);
};
}
ko.applyBindings(new personModel());
and HTML
<ul data-bind="foreach: people">
<li>
<div>
<span data-bind="text: name">has <span data-bind='text: items().length'> </span>
children: </span>
<ul data-bind="foreach: items">
<li><span href="#" data-bind="text: family"></span></li>
</ul>
<a href="#" data-bind="click: showModal">Add new Item</a>
<div id="modalNew" class="modal hide fade" data-bind="showModal:displaySubmitModal()">
<div class="modal-header">
<button type="button" class="close" data-bind="click: closeSubmitModal" data-dismiss="modal"
aria-hidden="true">
×</button>
<h3>
My Editor</h3>
</div>
<div class="modal-body">
Add task:
<input data-bind="value: newTaskText" placeholder="What needs to be done?" />
</div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" data-bind="click: addTask">Add Note</a> <a href="#"
class="btn" data-bind="click: closeSubmitModal" data-dismiss="modal">Close</a></div>
</div>
</div>
</li>
</ul>
EDIT
After many many tries it doesnt work. I don
t have Idea what I`m doing wrong and how to fix it.
What I observe is that "Add new Item" always i loading the last Modal window for the(Person 3). Even If I remove the rest Modals and left only the first one the new item is adding for the third person.
That's why I`m asking:
Is it possible to create nested array which will have a "Add new Item" button which will open a Modal window(twitter-bootstrap) with all field for the new item and will add this item to the selected array?
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…