代码之家 › 专栏 › 技术社区 › Keval Mehta

淘汰:foreach数据不以HTML格式显示

knockout.js html jquery javascript

-2

Keval Mehta · 技术社区 · 6 年前

我想用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 -->

客户选择可用性() 是ko可观测变量。 定制的 是ko可观测数组。

customVal的输出为:

我想展示 自定义选项选择文本 显示钥匙第一个P标签上的名称。

如何做到这一点?

预期结果:

请帮帮我。

2 回复 | 直到 6 年前

adiga 6 年前

从你 previous question 在这个问题上,我认为你在设置一个对象 ko.observableArray() . 这是不正确的。你应该设置一个 customVal 到A ko.observable() . 然后使用 Object.keys() 使用 aliasing 在你 foreach 结合。

var viewmodel = function() {
  var self = this;
  self.cust_opt_avail = ko.observable(1);
  
  let customVal = {
    Color: [{'custom_option_select_text': 'Red + $200.00'}, 
            {'custom_option_select_text': 'Green + $250.00'}],
    Size: {'custom_option_select_text': 'XL + $150.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 -->

注:

自从 定制的 在嵌套上下文中,您可能需要添加另一个 $parent 所有内部绑定的前缀。

Ray 6 年前

有趣的问题!所以你想做一个for循环 customVal() 但是 自定义() 它本身有数组。在这种情况下,了解击倒是很有用的 binding context . 尤其 $data . 您可以使用它作为对当前上下文的引用,而不必担心名称的颜色和大小。

一旦使用 $数据 作为颜色和大小数组的占位符,也执行for循环。我创建了一个片段:

var viewmodel = function(){
  var self = this;
  self.cust_opt_avail = ko.observable(1);
  var Color = [{'custom_option_select_text': 'Red + $200.00'},
                    {'custom_option_select_text': 'Green + $250.00'}];
  var Size = {'custom_option_select_text': 'XL + $150.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 -->