淘汰赛引导模式问题 [英] Knockout bootstrap modal issue

问题描述

我尝试自己编写一个Knockout应用程序，该应用程序中有可用的嵌套数组. 我正在尝试创建一个Bootstrap模态窗口，该窗口将帮助我添加一个嵌入式List的新项目. 我创建了所有内容，但不幸的是，新项目总是添加到最后一个数组中. 知道我在做什么错吗?

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?

我现在写的内容可以在 JSFiddle 上找到. JS

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

和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>

---

编辑

经过许多次尝试后，它仍然不知道我在做什么错以及如何解决它. 我观察到的是，我总是添加新的项目"(人3)的最后一个模态窗口.即使我删除了其余的Modals并只留下了第一个，新项目也会为第三人添加.

---

EDIT

After many many tries it doesnt work. I dont 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.

这就是为什么我问:

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

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?

推荐答案

您的代码即将运行.

但是有一个JavaScript问题，即全局变量污染，这使其无法正常工作.

But there is one javascript issue, a global variable pollution, which prevents it from working.

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

fixed your jsfiddle: http://jsfiddle.net/63tGP/3/

已修复

self = this;

到

var self = this;

self = this;与window.self = this;

最后，结果是addTask()中的self始终指向最后一个testModel.

the result is, at the end, the self in your addTask() always points to the last testModel.

这篇关于淘汰赛引导模式问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！