mbest / knockout-repeat

REPEAT binding for Knockout
http://mbest.github.io/knockout-repeat/
131 stars 18 forks source link

REPEAT binding for Knockout

The repeat binding can replace foreach in many instances and is faster and simpler for some tasks. In contrast to foreach:

Here’s a comparison between foreach and repeat for a data table:

<table>
    <tbody data-bind="foreach: data">
        <tr data-bind="foreach: $parent.columns">
            <td data-bind="text: $parent[$data.propertyName]"></td>
        </tr>
    </tbody>
</table>

<table>
    <tbody>
        <tr data-bind="repeat: { foreach: data, item: '$row' }">
            <td data-bind="repeat: { foreach: columns, item: '$col' }"
                data-repeat-bind="text: $row()[$col().propertyName]"></td>
        </tr>
    </tbody>
</table>

Main Parameters

The repeat binding accepts a single parameter of the number of repetitions or an array to iterate. It also accepts an object literal with these parameters provided through the count or foreach property. If the parameter is an observable, the repeat binding will add or remove elements whenever you update it. Here are the main parameters:

The following optional parameters do not support updates (and can’t be observable):

Context Properties

The repeat binding makes the following context properties available to bindings in the repeated nodes.

Repeated Element Binding

The repeat binding allows you to specify the binding for the repeated elements in a number of ways. Note that you cannot do this in the normal way you set additional bindings for an element—for example, <span data-bind="repeat: 5, text: $index"> will not set the text of the repeated elements and will probably generate an error.

  1. The simplest and cleanest way is to use a data-repeat-bind attribute, which becomes the data-bind attribute of the repeated elements.

    <span data-bind="repeat: 5" data-repeat-bind="text: $index">
  2. Similarly, you can specify a binding string using the bind parameter to repeat.

    <span data-bind="repeat: { count: 5, bind: 'text: $index' }">
  3. If you are using a custom binding provider that doesn’t support the standard binding method of using a data-bind attribute, you can specify the binding for repeated elements using a function provided through the bind parameter to repeat. If using this option with foreach, the first parameter to the function is the item and the second is the index. If used with just count, the first parameter is the index. In both cases, the last parameter to the function is the binding context object, which is useful if you want to access additional context properties such as $parent.

    <span data-bind="repeat: { count: 5, bind: function($index) { return { text: $index } } }">
    <div data-bind="repeat: { foreach: availableCountries, item: '$country',
        bind: function($country) { return { css: { sel: $country() == selectedCountry() } } } }">
        <span data-bind="text: $index+1"></span>. <span data-bind="text: $country"></span>
    </div>

License and Contact

License: MIT (http://www.opensource.org/licenses/mit-license.php)

Michael Best
https://github.com/mbest
mbest@dasya.com