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：

scala> def f(x: String) = x match {
     | case x if x.startsWith("A") => (1, x)
     |   case x if x.startsWith("B") => (1, x)
     |   case x if x.startsWith("C") => (2, x)
     |   case x if x.startsWith("D") => (2, x)
     |   case x if x.startsWith("E") => (3, x)
     |   case x if x.startsWith("F") => (3, x)
     |   case default => (0, default)
     | }
f: (x: String)(Int, String)

scala> val names = List("Adam", "Barbara", "Bob", "Charlie", "Damien", "Elaine", "Florence", "Gwen")
names: List[String] = List(Adam, Barbara, Bob, Charlie, Damien, Elaine, Florence, Gwen)

scala> names.groupBy(f(_)._1)
res2: scala.collection.immutable.Map[Int,List[String]] = Map(2 -> List(Charlie, Damien), 1 -> List(Adam, Barbara, Bob), 3 -> List(Elaine, Florence), 0 -> List(Gwen))

JS：

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

如何在编辑按钮单击时打开knockout js弹出窗口

1 个答案: