在點擊表格行時顯示自定義模式

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發生在你要顯示的視圖模型，並返回一個promise。該承諾通過了你傳遞給this.modal.close(dialogResult)的參數。