Knockout JS - настройка ширины таблицы на основе наблюдаемого поля - PullRequest
Новая
       7

Knockout JS - настройка ширины таблицы на основе наблюдаемого поля

0 голосов
/ 10 мая 2018

Я создаю веб-страницу с таблицей, показывающей транзакции.

В таблице есть раскрывающееся меню, которое используется для выбора типа транзакции для отображения. Таблица с одной строкой содержит это раскрывающееся меню, которое необходимо выровнять, чтобы оно отображалось у правого края таблицы транзакций. В зависимости от типа транзакции присутствуют другие поля фильтра, которые начинаются с левой стороны единственной строки таблицы.

В зависимости от типа транзакции ширина таблицы изменяется.

Я создал наблюдаемое поле в моей модели представления, равное текущей ширине таблицы.

Следующая разметка определяет эту разметку только с одним фильтром - выпадающим списком типа транзакции. 

<fieldset id="transactionFilters">
<table data-bind="width: TransactionGridWidth">
<!-- I also tried the following:
  <table data-bind="style: {width: TransactionGridWidth}">
  I tried appending "px" to the width field as well, with no change.
-->
<tr>
  <th style="width: 350px">
    <div class="dropdown" style="margin: 10px 0 10px 15px">
      <div align="right">
        <span style="padding: 10px">View&nbsp;&nbsp;</span>
          <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="true">
            <span id="dropdownTitle" >Type 1</span>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Type 1</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Type 2</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Type 3</a></li>
          </ul>
      </div>
    </div>
  </th>
</tr>
</table>
</fieldset>

Одновременно будет отображаться одна из следующих сеток, каждая с разной шириной: 

<div id="type1TransactionsGrid" style="width: 1000px;"></div>
<div id="type2TransactionsGrid" style="width: 800px; display: none;"></div>
<div id="type3TransactionsGrid" style="width: 1200px; display: none;"></div>

Следующий скрипт KnockoutJS определяет наблюдаемое: 

var ViewModel = {
  Type1TransactionsGrid: ko.observable(),
  Type2TransactionsGrid: ko.observable(),
  Type3TransactionsGrid: ko.observable(),
  TransactionGridWidth: ko.observable(),
  OnLoad: function () {
      ViewModel.TransactionGridWidth(1000);//initialisation
  }
};
...//rest of the implementation
ko.applyBindings(ViewModel);
ViewModel.OnLoad();

У меня есть переключатель, который выбирает сетку транзакций для отображения и устанавливает TransactionGridWidth в текущую ширину сетки, например: 

ViewModel.TransactionGridWidth(document.getElementById('Type1TransactionsGrid')).getBoundingClientRect().width);

Я уверен, что это работает, так как я показываю значение поля на экране и отслеживает изменения. Отладчик подтверждает, что наблюдаемая содержит правильную ширину сетки транзакций.

Независимо от того, что я делаю, я не могу изменить ширину таблицы в соответствии с наблюдаемым значением. Это работает, если я поставлю в явном размере, например 

    <table width="1000px">

TLDR: У меня есть наблюдаемая переменная, которая успешно отслеживает ширину отображаемой в данный момент сетки транзакций, но привязка данных этой переменной к стилю моей таблицы фильтров не работает.

Что я делаю не так?

1 Ответ

0 голосов
/ 10 мая 2018

Определенно работает использование привязки style для установки ширины таблицы. Я предполагаю, что есть какая-то часть того, что вы делаете неправильно, но из вашего вопроса непонятно, что это такое. 

function ViewModel() {
  this.tableWidth = ko.observable();
}

ko.applyBindings(new ViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<table style="border: 1px solid black" data-bind="style: {width: tableWidth() + 'px'}">
  <tr>
    <td>Some content</td>
  </tr>
</table>
<p>
  <select data-bind="value: tableWidth, options: [200, 300, 400]"></select>
</p>
...