Question

我刚开始使用淘汰赛并且使用foreach时遇到了一些问题。我需要使用“collapsing”div动态填充列表。我不知道如何设置 “data-target =”“”带有相应的div id。在Angular中有一种$ index。我如何在数据目标中声明它？

感谢您的帮助。

<ul class="nav navbar-nav side-nav">
         <li data-bind="foreach: { data: categories, as: 'category' }">
           <a href="javascript:;" data-toggle="collapse" data-target="??" data-bind="text: category.title"> </a>
                  <div id="??" class="collapse">
                      <h1>Some text</h1>
                  </div>
         </li>
      </ul>

Answer 1

在data-bind：

中进行

<a href="javascript:;" data-toggle="collapse"  data-bind="attr: { 'data-target': ... }">
  <div class="collapse" data-bind="attr: { id: ... }">

Knockout也有$index context property：

<div data-bind="attr: { id: 'foo' + $index() }">

Answer 2

<meta name="viewport" content="width=device-width, initial-scale=1.0">用于什么？我认为你首先不需要它。

如果您想切换某个部分，我建议您使用更自然的方式来解决此问题。在淘汰的上下文中，这意味着：编写一个封装你想要的行为的绑定处理程序。

用最简单的术语表达：你想点击一些东西，它应该切换其他东西。例如，以下data-target

的可见性

要做的最小的事情是：切换一个CSS类并使用它来影响可见性。

这是一个打开和关闭CSS类的绑定处理程序。与最简单的CSS一起，您可以获得崩溃/扩展行为。

<h1>

ko.bindingHandlers.toggleClass = {
  init: function (element, valueAccessor) {
    ko.utils.registerEventHandler(element, 'click', function () {
      var cssClass = valueAccessor(),
          shouldHaveClass = element.className.indexOf(cssClass) < 0;
      ko.utils.toggleDomNodeCssClass(element, cssClass, shouldHaveClass);
    });
  }
}

ko.applyBindings({
  categories: [
    {title: 'Category A'},
    {title: 'Category B'},
    {title: 'Category C'},
    {title: 'Category D'}
  ]
});

.collapsed+.collapse {
  display: none;
}

当然，您可以使用各种更先进的技术，但原则将保持不变。定义行为，通过绑定处理程序将该行为附加到元素。

Knockout foreach动态设置ID

2 个答案: