淘汰赛：foreach 数据未显示在 HTML 中

Question

我想在html中显示多维ko可观察数组数据。但是，我没有得到输出。

我的代码：

<!-- ko if: ($parent.cust_opt_avail() === 1) -->
<!-- ko foreach: $parent.customVal() -->
<div class="product-custom-option-select">
    <p class="options-label" data-bind="text:key"></p>
    <p class="options-label" data-bind="text:custom_option_select_text"></p>
</div>
<!-- /ko -->
<!-- /ko -->

cust_opt_avail() 是 ko 可观察变量。 customVal 是 ko 可观察数组。

customVal 的输出是：

我想在第一个 p 标签上显示 custom_option_select_text 和显示 key 名称。

怎么做？

预期结果：

请帮助我。

Answer 1

有趣的问题！所以你想通过 customVal() 做一个 for 循环，但是 customVal() 本身有数组。在这种情况下，了解 Knockout binding context 很有用。特别是$data。您可以将其用作对您所在的当前上下文的引用，而不必担心颜色和大小等名称。

一旦您使用 $data 作为 Color 和 Size 数组的占位符，也对它们进行 for 循环。我创建了一个片段：

var viewmodel = function(){
  var self = this;
  self.cust_opt_avail = ko.observable(1);
  var Color = [{'custom_option_select_text': 'Red + 0.00'},
                    {'custom_option_select_text': 'Green + 0.00'}];
  var Size = {'custom_option_select_text': 'XL + 0.00'};
  var customValArray = [Color, Size];
  self.customVal = ko.observableArray(customValArray);
};


ko.applyBindings(new viewmodel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<!-- ko if: (cust_opt_avail() === 1) -->
<div data-bind="foreach: customVal()">
  <!-- ko if: Array.isArray($data) -->
    <!-- ko foreach: $data -->
    <div class="product-custom-option-select">
        <p class="options-label" data-bind="text:custom_option_select_text"></p>
    </div>
    <!-- /ko -->
  <!-- /ko -->
  <!-- ko ifnot: Array.isArray($data) -->
    <div class="product-custom-option-select">
        <p class="options-label" data-bind="text:custom_option_select_text"></p>
    </div>
  <!-- /ko -->
</div>
<!-- /ko -->

Answer 2

来自您 foreach 绑定中的 previous question and comments in this question, I gather you're setting an object to ko.observableArray(). This is not correct. You should set a customVal to a ko.observable(). Then use Object.keys() and use aliasing。

var viewmodel = function() {
  var self = this;
  self.cust_opt_avail = ko.observable(1);
  
  let customVal = {
    Color: [{'custom_option_select_text': 'Red + 0.00'}, 
            {'custom_option_select_text': 'Green + 0.00'}],
    Size: {'custom_option_select_text': 'XL + 0.00'}
  };
  
  // This should be an observable
  self.customVal = ko.observable(customVal);
};

ko.applyBindings(new viewmodel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<!-- ko if: (cust_opt_avail() === 1) -->
<div data-bind="foreach: { data: Object.keys(customVal()), as: 'key' }">
  <div class="product-custom-option-select">
    <p style="font-weight:bold" data-bind="text:key"></p>

    <!-- ko if: Array.isArray($parent.customVal()[key]) -->
    <!-- ko foreach: $parent.customVal()[key] -->
       <p class="options-label" data-bind="text:custom_option_select_text"></p>
    <!-- /ko -->
    <!-- /ko -->
  
  <!-- ko if: !Array.isArray($parent.customVal()[key]) -->
  <p class="options-label" 
    data-bind="text:$parent.customVal()[key].custom_option_select_text"></p>
  <!-- /ko -->
</div>
</div>
<!-- /ko -->

注意：

由于 customVal 处于嵌套上下文中，您可能必须向所有内部绑定添加另一个 $parent 前缀。

淘汰赛：foreach 数据未显示在 HTML 中

Knockout : foreach data not display in HTML

html

javascript

jquery

knockout.js