如何在编辑按钮单击时打开淘汰赛 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());