knockout.js 敲除动态foreach

sg2wtvxw 于 2023-04-12 发布在其他

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

我是Knockout的新手，所以请原谅我。假设我有两个变量，每个变量包含一个可枚举的字符串列表。var oneStar=“a，b，c”var twoStar=“d，e，f”
在MVC视图中，我有两个单选按钮，用于设置观察到的模型属性“CoverLevel”
然后，我有一个foreach，我想使动态的基础上选择的单选按钮。
现在我正在这么做，但我知道这在语义上或其他方面都不正确。

<ul>
 <span data-bind="visible:  CoverLevel() == 21">
                            @foreach (string usp in oneStar)
                            {
                            <li>
                                <span class='usp-icon'></span>
                                <span class='usp-text'>@usp</span>
                            </li>
                        }
                            </span>
                            <span data-bind="visible:  CoverLevel() == 22>
                                @foreach (string usp in twoStar)
                                {
                                <li>
                                    <span class='usp-icon'></span>
                                    <span class='usp-text'>@usp</span>
                                </li>
                            }
                                </span> 
</ul>

我如何使oneStar/twoStar列表在foreach循环中基于coverlevel的值动态？
非常感谢尼克。
我有一个可行的解决方案，但它是不正确的。

knockout.js

来源：https://stackoverflow.com/questions/75897030/knockout-dynamic-foreach

1条答案

按热度按时间

3phpmpom1#

Knockoutjs使用checked绑定radio按钮和check框。computed可观察对象可用于将'a，b，c'表示为单独的数组元素。HTML示例：

<label><input type="radio" name="flong" value="21" data-bind="checked: coverLevel">21</label>
<label><input type="radio" name="flong" value="22" data-bind="checked: coverLevel">22</label>
<ul data-bind="visible:  coverLevel() == 21,  foreach: oneStar">
  <li>
    <span class='usp-icon' data-bind="text: $data"></span>
  </li>
</ul>
<ul data-bind="visible:  coverLevel() == 22,  foreach: twoStar">
  <li>
    <span class='usp-icon' data-bind="text: $data"></span>
  </li>
</ul>

JavaScript模型类：

class ModelModel {
  constructor() {
    this.coverLevel = ko.observable("21");
    this.oneStarString = ko.observable('a,b,c');
    this.oneStar = ko.computed(() => this.oneStarString().split(','));
    this.twoStarString = ko.observable('d,e,f');
    this.twoStar = ko.computed(() => this.twoStarString().split(','));
  }
}
const model = new ModelModel();

window.addEventListener('load', () => {
  ko.applyBindings(model);
});

参见工作示例：https://jsfiddle.net/martlark/rx3se2m7/22/

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

我来回答

knockout.js 敲除动态foreach

1条答案

相关问题

热门标签

最新问答