时间戳

首页 > 解决方案 > 通过 html 中的 Knockout 循环将值存储在变量中

javascript - 通过 html 中的 Knockout 循环将值存储在变量中

问题描述

我是 KO 的新手，在我的 html 文件中，我正在打印这样的值 -

<!-- ko foreach: { data: JSON.parse($parent.options), as: 'option' } -->
    <!-- ko if: option.label === 'AAA' || option.label === 'BBB'  -->
        <dd class="values" data-bind="html: option.value"></dd>
    <!-- /ko -->    
<!-- /ko -->

它工作正常。但我想要的是，我想将循环的所有值分配给一个变量并想在循环后打印。就像我们在 php 中所做的那样-

foreach($data as $key=> $index){
    if($key==0)
        $var = $index['value'];
    else
        $var .= ' '.$index['value'];    
}

echo $var

我想使用上面的 KO 循环在 KO 的 html 文件中做同样的事情。

标签： javascriptknockout.js

解决方案

您可以像这样创建 2 个computed属性。

  • parsedOptions获取解析的 JSON。
  • concatenatedValues使用mapand获取由空格分隔的值join。

然后parsedOptions在foreach. 并绑定concatenatedValues到span 

const JSONstring = JSON.stringify([{ label: "AAA", value: 1 },{ label: "BBB", value: 2 },{ label: "CCC", value: 3 }]);

const viewModel = function() {  
  this.options = JSONstring;
  
  this.parsedOptions = ko.computed(() => {
    return JSON.parse(this.options)
  });
  
  this.concatenatedValues = ko.computed(() => {
    return this.parsedOptions().map(a => a.value).join(' ')
  });
}

ko.applyBindings(new viewModel())
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<!-- ko foreach: { data: parsedOptions, as: 'option' } -->
    <!-- ko if: option.label === 'AAA' || option.label === 'BBB'  -->
        <dd class="values" data-bind="html: option.value"></dd>
    <!-- /ko -->
<!-- /ko -->

<br> All values:
<span data-bind="text: concatenatedValues"></span>

推荐阅读