Knockout.js基于数组中的颜色索引

cs7cruho 于 2023-04-30 发布在其他

关注(0)|答案(1)|浏览(176)

你好，提前感谢。
我正在构建一个自定义组件，我想从组件数组中检索属性。
在组件视图模型中：

graph.colors = ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac"];

...然后在模板中：

<div class="legend" data-bind="foreach: legend">
    <div class="item">
      <span class="box" data-bind="style: { 'background-color': $parent.colors[$index]}"></span>
      <span data-bind="text: $data"></span> <!-- works -->
      <span data-bind="text: $index"></span>  <!-- works -->
      <span data-bind="text: $component.colors[0]"></span> <!-- works -->
      <span data-bind="text: $component.colors[$index]"></span>  <!-- blank! -->
    </div>
  </div>

虽然$index返回正确，$component.colors定义良好，但颜色没有返回。
谢谢！

knockout.js

来源：https://stackoverflow.com/questions/76118911/knockout-js-indexed-based-color-from-array

1条答案

按热度按时间

3phpmpom1#

index是一个函数，当使用它作为text: index时，它会自动解包，它也可以像观察到的那样工作。但是当在数组索引选择器中使用它时，你应该添加()，这样它就可以看到：
<span data-bind="text: $component.colors[$index()]"></span>

const colors = ["#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00", "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707", "#651067", "#329262", "#5574a6", "#3b3eac"];

ko.applyBindings();

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<ul data-bind="foreach: { data: [...Array(10).keys()], as: 'item' }">
  <li data-bind="text: colors[$index()]"></li>
</ul>

赞(0）回复(0）举报 2023-04-30

我来回答

Knockout.js基于数组中的颜色索引

1条答案

相关问题

热门标签

最新问答