twitter-bootstrap - Knockout.js 和 Bootstrap 模式对话框

标签 twitter-bootstrap knockout.js custom-binding

我正在使用我在SO上找到的一些代码(这里的第二个答案:knockout.js - deferred databinding for modal?)。

详细信息并未显示在表单中。

  rowClick: function(data){
    console.log("in row click");
    console.log(data); // produces data as per debug below
    // load the transaction when a row is clicked
    self.EditingTransaction(data);
    console.log(self.EditingTransaction()); // produces data as per debug below (not as a observable though)
  },

这里是查看代码:

<div data-bind="modal: EditingTransaction" class="fade">
    <form data-bind="submit: $root.SaveTransaction">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>
            Editing transaction</h3>
    </div>
    <div class="modal-body">
        <label>Date</label> <input type="text" data-bind="text: Date"/></br>
        <label>Category</label> <input type="text" data-bind="text: Category"/></br>
        <label>Subcategory</label> <input type="text" data-bind="text: Subcategory"/></br>
        <label>Amount</label> <input type="text" data-bind="text: Amount"/></br>
        <label>Notes</label> <input type="text" data-bind="text: Notes"/></br>
        <pre data-bind="text: ko.toJSON($root.EditingTransaction, null, 2)"></pre>

    </div>
    <div class="modal-footer">
         <a href="#" class="btn btn-primary" data-bind="click: $root.SaveTransaction">Save changes</a>
    </div>
    </form>
</div>

当数据分配给 editTransaction 时,会显示该对话框 - ko.toJSON 之前的调试 HTML 显示如下:

{
  "ID": "1231",
  "TransactionType": "Withdrawal",
  "Date": "2012-11-07",
  "Category": "cat",
  "Subcategory": "sub cat",
  "Amount": "-50.00",
  "currency": "GBP",
  "Notes": "",
  "AccountName": "Account 2",
  "Payee": "Cheque"
}

我进行了搜索,并看到了有关在模式初始化(​​页面加载时)时数据不可用的评论,但这对我来说没有意义(我相信点绑定(bind)是它们在模式初始化时更新)查看数据何时更改以及调试语句工作正常)。我尝试过在绑定(bind)代码中不使用 with,并且在数据绑定(bind)文本中引用 $root。

所以,任何关于它不起作用的想法都会很棒。

最佳答案

野餐:-)

输入标记上的绑定(bind)应该是值而不是文本...我已经断断续续地查看了一天 - 在发布答案后 10 分钟内,我就得到了答案!

关于twitter-bootstrap - Knockout.js 和 Bootstrap 模式对话框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13723708/

相关文章:

html - 在 Bootstrap 中更改轮播的标题文本的大小

javascript - komapping fromjs 排除将属性转换为可观察的数组内部元素

javascript - 访问家长的成员(member)

knockout.js - 自定义 knockout 绑定(bind)不更新底层可观察值

javascript - Knockoutjs valueHasMutated 无法正常工作

jquery - 无法让 Twitter Bootstrap Carousel 正常工作

css - 将 Bootstrap 隐藏在另一个 CSS 后面(将 HTML 与页面布局解耦)

html - 将输入字段的顺序从垂直更改为水平?

css - 使用 KO "if"绑定(bind)时如何删除包含字段的边框?

javascript - Knockoutjs 单选按钮组自定义绑定(bind)未根据选择更新