Привязка данных KnockoutJS не показывает ничего в таблице для каждого - PullRequest
Новая
       34

Привязка данных KnockoutJS не показывает ничего в таблице для каждого

0 голосов
/ 24 сентября 2019

У меня есть функция JavaScript, которая создает модель и применяет ее к HTML с помощью knockoutJS.В файле HTML у меня есть два способа отображения одних и тех же данных:

1 - выберите список (работает) 2-таблица (не отображаются одни и те же данные)

Пожалуйста, помогите.

// =============  JS ========================//

      function openPayoutCreditPopup() {
            var payoutCreditViewModel = {         
                availablePayoutsToOriginalPaymentMethods: ko.observableArray(options.availablePayoutsToOriginalPaymentMethods),           
            };

            var payoutCreditPopupContainer = document.getElementById("payoutCreditPopup");
            ko.applyBindings(payoutCreditViewModel, payoutCreditPopupContainer);
        }

// ============= HTML ========================//

    <div class="payout-credit-popup pm-form">
            <div>
                <table>                     
                    <tr>
                        <td class="label">PaymentMethods</td>
                        <td class="field">
                            <select data-bind="options: availablePayoutsToOriginalPaymentMethods, optionsText: 'FinanceInfo'" class="width-75"></select>
                        </td>
                    </tr>
                    <tr>
                        <td class="label"></td>
                        <td>
                            <table >
                                <thead>
                                    <tr>
                                        <th>Payment Breakdown</th>
                                        <th>Paid</th>
                                    </tr>
                                </thead>
                                <tbody data-bind="foreach: availablePayoutsToOriginalPaymentMethods">
                                    <tr>
                                        <td data-bind="text: FinanceInfo"></td>
                                        <td>amount</td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>               
                </table>
            </div>
        </div>
    </div>

1 Ответ

0 голосов
/ 24 сентября 2019

вот рабочий пример, основанный на вашем коде.единственное, что я сделал, это

  • добавление элементов в массив options.availablePayoutsToOriginalPaymentMethods
  • добавление идентификатора payoutCreditPopup в div верхнего уровня
  • вызов функции openPayoutCreditPopup

и, как я вижу, он работает нормально 

var options = {};
options.availablePayoutsToOriginalPaymentMethods = [
  {FinanceInfo:'testing 1'},
  {FinanceInfo:'testing 2'},
  {FinanceInfo:'testing 3'},
 ];

function openPayoutCreditPopup() {
  var payoutCreditViewModel = {
    availablePayoutsToOriginalPaymentMethods: ko.observableArray(options.availablePayoutsToOriginalPaymentMethods),
  };

  var payoutCreditPopupContainer = document.getElementById("payoutCreditPopup");
  ko.applyBindings(payoutCreditViewModel, payoutCreditPopupContainer);
}

openPayoutCreditPopup();
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div id="payoutCreditPopup" class="payout-credit-popup pm-form">
  <div>
    <table>
      <tr>
        <td class="label">PaymentMethods</td>
        <td class="field">
          <select data-bind="options: availablePayoutsToOriginalPaymentMethods, optionsText: 'FinanceInfo'" class="width-75"></select>
        </td>
      </tr>
      <tr>
        <td class="label"></td>
        <td>
          <table>
            <thead>
              <tr>
                <th>Payment Breakdown</th>
                <th>Paid</th>
              </tr>
            </thead>
            <tbody data-bind="foreach: availablePayoutsToOriginalPaymentMethods">
              <tr>
                <td data-bind="text: FinanceInfo"></td>
                <td>amount</td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </table>
  </div>
</div>
</div>
...