javascript - Knockout foreach dynamically set ID - Stack Overflow

admin管理员组

文章数量:1406919

I just started using knockout and having some problems using foreach. I need to dynamically populate a list with "collapsing" div. I cant figuer out how to set the "data-target=""" with the according div id.Is there a kind of $index as in Angular.How do i declare it inside of the data-target?

Thank for the help.

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

I just started using knockout and having some problems using foreach. I need to dynamically populate a list with "collapsing" div. I cant figuer out how to set the "data-target=""" with the according div id.Is there a kind of $index as in Angular.How do i declare it inside of the data-target?

Thank for the help.

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

• javascript
• knockout.js

Share Improve this question Follow asked Nov 23, 2016 at 11:12 user2355793user2355793 8722 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Do it within the data-bind:

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

Knockout does have a $index context property, too:

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

What's data-target being used for? I don't think you not need that in the first place.

If you want to toggle a section, I remend using a more natural way to solve this. In the context of knockout this means: write a binding handler that encapsulates the behavior you want.

Expressed in simplest terms: You want to click on something and it should toggle something else. For example the visibility of the following <h1>

The minimal thing to do would be: Toggle a CSS class and use that to influence visibility.

Here is a binding handler that switches a CSS class on and off. Together with the simplest CSS you get collapse/expand behavior.

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

Of course you can use all kinds of more advanced techniques, but the principle would stay the same. Define a behavior, attach that behavior to an element via a binding handler.

本文标签： javascriptKnockout foreach dynamically set IDStack Overflow