3

我想创建自定义模式。基本上，我有一个表，其中有行。当用户单击一行时，我希望出现一个弹出窗口。我正在关注如何在此链接中创建自定义模式的描述：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 Here's the code 的视图：

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

如何将表格点击事件与我创建的这个自定义模式联系起来？

4

1 回答 1

2

要显示模态，就像使用 compose 绑定一样。您将要显示的视图模型传递给它，视图模型定位器将根据您的视图模型找到视图。

这是表格：

<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接受您要显示的视图模型并返回一个promise。该承诺被传递给您传递给this.modal.close(dialogResult).

于 2013-03-24T00:15:55.027 回答