3

カスタムモーダルを作成したい。基本的に、行を含むテーブルがあります。ユーザーが行をクリックすると、ポップアップウィンドウが表示されます。このリンクでカスタムモーダルを作成する方法の説明に従っています：http：//durandaljs.com/documentation/Showing-Message-Boxes-And-Modals/

説明に基づいて、カスタムモーダルを作成するには2つのクラスが必要であると考えました。1つはビューで、もう1つはモーダルです。

私は実際には、リンクにまったく同じコードを持つ2つのクラスがあります。

私の質問は、行がクリックされたときにカスタムモーダルを表示するにはどうすればよいですか？

これが私の見解では私のテーブルであるとしましょう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;
});

テーブルクリックイベントを、作成したこのカスタムモーダルと関連付けるにはどうすればよいですか？

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を返します。そのpromiseには、に渡したもののパラメーターが渡されますthis.modal.close(dialogResult)。

于 2013-03-24T00:15:55.027 に答える