html - 在单击表格行时显示自定义模式

我想创建自定义模式。基本上，我有一个表，其中有行。当用户单击一行时，我希望出现一个弹出窗口。我正在遵循如何在此链接中创建自定义模式的说明：http://durandaljs.com/documentation/Showing-Message-Boxes-And-Modals/
根据描述，我想我需要两个类来创建自定义模式。一个是视图，另一个是模态。
实际上这两个类在链接中的代码完全相同。
我的问题是，如何在单击行时显示自定义模式？
假设这是我视图中名为index.html的表

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th></th>
      <th>Item</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

假设我有一个名为messageBox.html的视图，下面是它的代码：

<div class="messageBox">
  <div class="modal-header">
    <h3 data-bind="html: title"></h3>
  </div>
  <div class="modal-body">
    <p class="message" data-bind="html: message"></p>
  </div>
  <div class="modal-footer" data-bind="foreach: options">
    <button class="btn" data-bind="click: function () { $parent.selectOption($data); }, html: $data, css: { 'btn-primary': $index() == 0, autofocus: $index() == 0 }"></button>
  </div>
</div>

还有一个叫做messageBox.js的模态。这是密码：

define(function() {
  var MessageBox = function(message, title, options) {
    this.message = message;
    this.title = title || MessageBox.defaultTitle;
    this.options = options || MessageBox.defaultOptions;
  };

  MessageBox.prototype.selectOption = function (dialogResult) {
    this.modal.close(dialogResult);
  };

  MessageBox.defaultTitle = '';
  MessageBox.defaultOptions = ['Ok'];

  return MessageBox;
});

如何将表单击事件与我创建的自定义模式相关联？

最佳答案

要显示一个模态，它就像您如何使用组合绑定一样。将要显示的视图模型传递给它，viewmodel locator将根据您的视图模型找到视图。
这是桌子：

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th></th>
      <th>Item</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody data-bind="foreach: items">
    <tr data-bind="click: $parent.showMessage">
      <td data-bind="text: item"></td>
      <td data-bind="text: price"></td>
      <td data-bind="text: quantity"></td>
    </tr>
  </tbody>
</table>

这是绑定到表的viewmodel。

define(['durandal/app', 'durandal/system', 'messageBox'], function(app, system, MessageBox) {
  return {
    items: ko.observableArray([
      { item: 'fruity pebbles', price: 4.5, quantity: 1 },
      { item: 'captain crunch', price: 3.5, quantity: 1 },
      { item: 'honey bunches of oats', price: 4, quantity: 1 }
    ]),
    showMessage: function(item) {
      var msg = 'your purchasing' + item.name;
      var mb = new MessageBox(msg)
      app.showModal(mb).then(function(dialogResult){
        system.log('dialogResult:', dialogResult);
      });
    }
  };
});

app.showModal接受要显示的viewmodel并返回promise。这个承诺是传递给this.modal.close(dialogResult)的一个参数。