Knockout foreach动态设置ID

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

感谢您的帮助。

<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>

来源

2016-11-23 user2355793

做到这一点data-bind内：

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

淘汰赛确实有$index context property，太：

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

来源

2016-11-23 11:16:48

感谢快速response.I编辑如下：但是，得到的错误消息： knockout.js：68Uncaught语法错误：无法处理的结合“的foreach：功能（）{返回{数据：类别，如：“类'}} – user2355793

你的viewmodel中是否存在'categories'？ –

是的，它工作正常 – user2355793

什么是被用于data-target？我认为你首先不需要这样做。

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

用最简单的术语表达：你想点击某个东西，它应该切换其他东西。例如下面的可见性<h1>

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

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

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; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<ul data-bind="foreach: categories"> 
 
    <li> 
 
     <a href="#" data-bind="text: title, toggleClass: 'collapsed'"></a> 
 
     <div class="collapse"> 
 
      <h1>Some text</h1> 
 
     </div> 
 
    </li> 
 
</ul>

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

来源

2016-11-23 11:56:34 Tomalak

Knockout foreach动态设置ID

回答

相关问题