Question

我正在构建一个包含显示交易的表的网页。

该表有一个下拉菜单，用于选择要显示的事务类型。包含一行的表包含此下拉菜单，该菜单需要对齐以显示在事务表的右边缘。根据交易类型，存在其他过滤字段，这些字段从表格的左侧开始。

根据交易类型，表格的宽度会发生变化。

我在视图模型中创建了一个可观察的字段，它等于表格的当前宽度。

以下标记定义了此布局，只有一个过滤器 - 事务类型的下拉选择。

<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脚本定义了observable：

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

我确信这是有效的，因为我在屏幕上显示该字段的值，并跟踪更改。调试器确认observable保持事务网格的正确宽度。

无论我做什么，我都无法通过可观察的值来改变表格的宽度。如果我放入明确的大小，例如

    <table width="1000px">

TLDR：我有一个可观察的变量，它成功地跟踪了当前显示的事务网格的宽度，但是将这个变量绑定到我的过滤器表的样式是不行的。

我做错了什么？

Answer 1

使用style绑定来设置表格的宽度绝对有效。我的猜测是，你有一部分做错了，但你的问题不清楚是什么。

＆＃13;

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

＆＃13;

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

＆＃13;

Knockout JS - 根据可观察字段

1 个答案: