为什么在使用淘汰赛 js 时这个 twitter 引导模式不起作用？答案

【问题标题】：Why is this twitter bootstrap modal not working when using knockout js?为什么在使用淘汰赛 js 时这个 twitter 引导模式不起作用？
【发布时间】：2015-01-30 00:38:20
【问题描述】：

我正在尝试让淘汰赛 js 与 twitter 引导模式对话框一起工作。

我从 Knockout js 网站获取了联系人编辑器示例，并将其更改为使用模式对话框进行添加/编辑。

我花了很长时间试图让它工作，但由于某种原因它没有。

你可以在这里查看：

http://jsfiddle.net/27pscgnk/5/

提前感谢任何解决方案

我认为问题可能出在此处（当用户单击保存时不会调用它）：

self.addContact = function() {
    self.contacts.push({
        firstName: "",
        lastName: "",
        phones: ko.observableArray()
    });
};

【问题讨论】：

问题不是 bootstrap，问题是你我们引用了 firstName 和 lastName，它们在 observable 数组中，只能在 forEach 绑定中引用，试试这个jsfiddle.net/27pscgnk/6

标签： javascript jquery twitter-bootstrap knockout.js modal-dialog

【解决方案1】：

我删除了 fiddle 中的一些错误，并根据您的输入更改了 add 函数，现在查看 fiddle http://jsfiddle.net/27pscgnk/6/

self.contact = {
    firstName: ko.observable(),
    lastName: ko.observable(),
}

self.addContact = function() {
    self.contacts.push({
        firstName: self.contact.firstName(),
        lastName: self.contact.lastName(),
        phones: ko.observableArray()
    });
};

在绑定中：

<div class="form-group">
    <label for="inputNameLbl" class="col-sm-2 control-label">First Name</label>
    <div class="col-sm-10">
        <textarea data-bind="value: contact.firstName"></textarea>
     </div>
</div>
<div class="form-group">
     <label for="inputDescLbl" class="col-sm-2 control-label">Last Name</label>
     <div class="col-sm-10">
          <textarea data-bind="value: contact.lastName"></textarea>
     </div>
</div>

【讨论】：