Question

我想创建自定义模式。基本上，我有一个表中有行。当用户点击一行时，我想要一个弹出窗口出现。我在此链接中按照如何创建自定义模式的说明进行操作：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;
});

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

Answer 1

要显示模态，就像使用组合绑定一样。您传递了一个要显示的视图模型，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>

这是绑定到表的视图模型。

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)的参数。

单击表格行时显示自定义模态

1 个答案: