displaying custom modal on clicking a table row

Question

I want to create custom modal. Basically, I have a table which has rows in it. When the user clicks on a row, I want a pop-up window to appear. I am following the description of how to create a custom modal in this link: http://durandaljs.com/documentation/Showing-Message-Boxes-And-Modals/

Based on the description, I figured I need two classes to create a custom modal. One is the view and another one is modal.

I actually the two classes with the exact same code in the link.

My question is, how do I display the custom modal when a row is clicked?

Let's say this is my table in my view called 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>

And suppose I have a view called messageBox.html Here's the code for it:

<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>

And a modal called messageBox.js. Here's the code for it:

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

How do I tie the table click event with this custom modal that I created?

I think you'll have a better chance of getting help if *you* provide the pertinent code as opposed to making other people go find it. — ultranaut, Mar 23 '13 at 20:39

Evan Larsen · Answer 1 · 2013-03-24T04:43:02.703

To show a modal its just like how you use the compose binding. You pass it a viewmodel you want to show and the viewmodel locator will find the view based off your viewmodel.

Here is the table:

<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>

Here is the viewmodel thats bound to the 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 takes in the viewmodel which you want to show and returns a promise. That promise is passed a parameter of what you passed to the this.modal.close(dialogResult).

thanks a lot for your answer.Could you please provide JSFiddle for this code? — Stranger, Mar 24 '13 at 00:22
How about the view messageBox.html. How do you tie that with the viewmodel? — Stranger, Mar 24 '13 at 15:45
Download the durandal samples : http://durandaljs.com/documentation/Understanding-the-Samples/ I think this will give you a better understanding of how it works. Also, look into composition binding to understand how durandal binds viewmodels to views and how it finds the views based off conventions. http://durandaljs.com/documentation/Composition/ — Evan Larsen, Mar 24 '13 at 16:41

displaying custom modal on clicking a table row

1 Answers1