編集ボタンでノックアウトjsポップアップを開く方法

Question

knockoutjsを使ってテーブルにユーザーデータをバインドしているサンプルコードについては、特定のユーザー名をクリックするとそのユーザーの行の下に新しいtrが開きます特定のユーザーの詳細、しかし私はポップアップで開きたい。どうやってするか。続き はあなたの編集や、あなたのポップアップ上のユーザの更新編集変数を選択するたびのための観察可能な変数を持つことができ、私のhtml

<tbody data-bind="foreach: Users"> 
     <tr> 
      <td><span data-bind="css: { clickable: !$root.EditId() }, click: $root.Edit, text: Name"></span></td> 
      <td data-bind="text: LoginName"></td> 
      <td data-bind="text: SpaceName"></td> 
      <td data-bind="text: Email"></td> 
      <td data-bind="text: moment(LastLoginDate).format('M/DD/YYYY h:MM Z')"></td> 
     </tr> 
     <tr data-bind="visible: $root.EditId() === Id"> 
      <td colspan="3"> 
       <div id="EditEbillingPanel"> 
        <div> 
         <em>E-Billing</em> 
        </div> 
        <div class="label"> 
         <label data-bind="attr: { 'for': 'EbillingActive_' + Id }">Active: </label> 
        </div> 
        <div class="field"> 
         <input data-bind="attr: { 'id': 'EbillingActive_' + Id }, checked: Ebilling() && Ebilling().IsActive" type="checkbox" /> 
        </div> 
        <div class="label"> 
         <label data-bind="attr: { 'for': 'EbillingEmail_' + Id }">Alternate email: </label> 
        </div> 
        <div class="field"> 
         <input data-bind="attr: { 'id': 'EbillingEmai_' + Id }, enable: Ebilling() && Ebilling().IsActive, value: Ebilling() ? Ebilling().Email : null, valueUpdate: 'keyup'" type="email" /> 
        </div> 
        <div class="label"> 
         <label data-bind="attr: { 'for': 'EbillingReminderDays_' + Id }">Reminder: </label> 
        </div> 
        <div class="field"> 
         <select data-bind="attr: { 'id': 'EbillingReminderDays_' + Id }, enable: Ebilling() && Ebilling().IsActive, value: Ebilling() ? Ebilling().ReminderDays : null"> 
          <option value="0">Do not send me a reminder</option> 
          <option value="1">1 day before the due date</option> 
          <option value="2">2 days before the due date</option> 
          <option value="3">3 days before the due date</option> 
          <option value="4">4 days before the due date</option> 
          <option value="5">5 days before the due date</option> 
          <option value="6">6 days before the due date</option> 
          <option value="7">7 days before the due date</option> 
         </select> 
        </div> 
       </div> 
       <div id="EditAccountPanel"> 
        <div> 
         <em>Password</em> 
        </div> 
        <div> 
         <label data-bind="attr: { 'for': 'ForcePasswordChange_' + Id }">Force password change: </label> 
        </div> 
        <div class="field"> 
         <input data-bind="attr: { 'id': 'ForcePasswordChange_' + Id }, checked: ForcePasswordChange" type="checkbox" /> 
        </div> 
        <div id="PasswordInstructions"> 
         If user does not remember their password, enter temporary password here. User is required to have a password to enter a password change. Temporary password must be at least 8 characters long, with at least one numeric character and one of the following special symbols: !@#$%^&*()+= 
        </div> 
        <div> 
         <label data-bind="attr: { 'for': 'TempPassword_' + Id }">Temporary password:</label> 
        </div> 
        <div class="field"> 
         <input data-bind="attr: { 'id': 'TempPassword_' + Id }, enable: ForcePasswordChange, value: TempPassword, valueUpdate: 'keyup'" type="text" /> 
        </div> 
       </div> 
       <div id="EditActionPanel"> 
        <span data-bind="click: $root.Save, css: { clickable: $root.IsValid }">Save</span> 
        <span class="clickable" data-bind="click: $root.CancelEdit">Cancel</span> 
       </div> 
      </td> 
      <td colspan="2"> 
       <div id="UserInfoPanel"> 
        <div> 
         <em>User Info</em> 
        </div> 
        <!-- ko if: CreatedDate() --> 
        <div data-bind="text: 'Created: ' + moment(CreatedDate()).format('M/DD/YYYY h:MM Z')"></div> 
        <!-- /ko --> 
        <div>AutoPay: <span data-bind="text: IsEnrolledInAutoPay() ? 'enrolled' : 'not enrolled'"></span></div> 
        <div data-bind="text: 'Bank account info: ' + (BankAccountOnFile() ? 'Y' : 'N')"></div> 
        <div data-bind="text: 'Credit card info: ' + (CreditCardOnFile() ? 'Y' : 'N')"></div> 
        <div data-bind="css: { 'cc-expired': CreditCardIsExpired() || false }, text: 'Credit card expiration: ' + ((CreditCardExpiration() === '' || CreditCardExpiration() === '0/0') ? 'n/a' : CreditCardExpiration())"></div> 
       </div> 
      </td> 
     </tr> 
    </tbody> 

Answer 1

です。ただ、一例として

https://jsfiddle.net/kyr6w2x3/154/

HTML：

<table> 
<tbody data-bind="foreach: Users"> 
     <tr> 
      <td></td> 
      <td data-bind="text: LoginName"></td> 
      <td data-bind="text: SpaceName"></td> 
      <td data-bind="text: Email"></td> 
      <td> <input type="button" value="Edit" data-bind="click:$parent.EditUser"></td> 
     </tr> 
    </tbody> 
</table> 

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel"> 
    <div class="modal-dialog modal-sm" role="document"> 
    <div class="modal-content"> 
     <h5 > Edit</h5> 
     <input type="text" data-bind="textInput:EditLoginName" > 
     <input type="text" data-bind="textInput:EditEamil" > 
     <input type="button" value="update" data-bind="click:UpdateUser"> 
    </div> 
    </div> 
</div> 

JS：

var data = [{Id:1,LoginName:"Dave" ,SpaceName : "SpaceName1" , Email:"Dave@test.com" },{Id:2,LoginName:"Mike" ,SpaceName : "SpaceName2" , Email:"Mike@test.com" },{Id:3,LoginName:"Kevin" ,SpaceName : "SpaceName3" , Email:"Kevin@test.com" }] 

var AppViewModel = function(){ 
    var self = this; 
    self.EditLoginName = ko.observable(); 
    self.EditEamil = ko.observable(); 
    self.SelectedUserId = ko.observable(); 

    self.Users = ko.observableArray($.map(data, function (user) { 
    return new UserViewModel(user); 
    })); 

    self.EditUser = function(user){ 
    $(".bs-example-modal-sm").modal('show') 
    self.EditLoginName(user.LoginName()) 
    self.EditEamil(user.Email()); 
    self.SelectedUserId(user.Id()) 
    } 

    self.UpdateUser = function(){ 
    alert(self.EditLoginName() + " Id: "+self.SelectedUserId() + " is ready to get updated"); 
    } 
} 

var UserViewModel = function (data){ 
    var self = this; 
    self.Id = ko.observable(data.Id) 
    self.LoginName = ko.observable(data.LoginName) 
    self.SpaceName = ko.observable(data.SpaceName) 
    self.Email = ko.observable(data.Email) 
} 
ko.applyBindings(new AppViewModel());