淘汰赛引导模式问题

Question

我尝试自己编写一个 Knockout 应用程序，其中包含可用的嵌套数组。 我正在尝试创建一个引导模式窗口，它将帮助我添加一个新的嵌入式列表项。 我创建了所有内容，但不幸的是，新项目总是添加到最后一个数组中。 知道我做错了什么吗？

我现在写的可以在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());

和 HTML

<ul data-bind="foreach: people">
        <li>
            <div>
                <span data-bind="text: name">has <span data-bind='text: items().length'>&nbsp;</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">
                            &times;</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>

---

编辑

经过多次尝试，它没有t work. I dont 知道我做错了什么以及如何解决它。 我观察到的是“添加新项目”总是我为（Person 3）加载最后一个模态窗口。即使我删除了其余的 Modals 并只留下了第一个，新项目正在为第三人添加。

这就是我要问的原因：

是否可以创建具有“添加新项目”按钮的嵌套数组，该按钮将打开一个模态窗口（twitter-bootstrap），其中包含新项目的所有字段并将该项目添加到选定的数组中？

Answer 1

您的代码几乎可以工作了。

但是有一个 javascript 问题，全局变量污染，这会阻止它工作。

修复了你的 jsfiddle：http://jsfiddle.net/63tGP/3/

解决了

self = this;

到

var self = this;

self = this; 与window.self = this; 相同

最后，你的 addTask() 中的 self 总是指向最后一个 testModel。

Answer 2

以前我已经找到了解决方案。

我在 googlegroups 上写了我的问题，一个人更新了我的 jsFiddle。

他添加了一个具有启发性的模块模式。

如果有人对我们的讨论感兴趣here is a link to it

还有我的更新jsFiddle

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(valueAccessor())) {
                  $(element).modal('show');
                 $("input", element).focus();
             }
             else {

                 $(element).modal('hide');
             }
         }
     };


var Task = function(data) {
   var family = ko.observable(data.family);
    return { family: family};
}

var personModel = function() {  
    var people = ko.observableArray([
       new testModel("Person",["one","two","three"]),
       new testModel("Person2",["one2","two2","three2"]),
       new testModel("Person3",["one3","two3","three3"])
       ]);
    return {
             people: people
            };
};

var TaskItem = function(data) {
     var family = ko.observable(data); 
    return { family: family};
}

var testModel = function(familyName,children){
   var itemToAdd = ko.observable("");
   var name = familyName;
   var items = ko.observableArray([]);

   for(var i = 0; i<children.length;i++){
      items.push(new TaskItem(children[i]));
   }

   var currentItem = ko.observable();
   var newTaskText = ko.observable();
   var displaySubmitModal = ko.observable(false);
   var showModal = function(){
       displaySubmitModal(true);
   };
   var closeSubmitModal = function(){
       displaySubmitModal(false);
       newTaskText("");
   };

   // Operations
   var addTask = function() {
       items.push(new Task({ family: newTaskText() }));
       newTaskText("");
       displaySubmitModal(false);
   }; 

    return {
        items: items,
        showModal: showModal,
        displaySubmitModal: displaySubmitModal,
        closeSubmitModal: closeSubmitModal,
        name: name,
        newTaskText: newTaskText,
        addTask: addTask,

    };
}

ko.applyBindings(new personModel());

问候