Skip to content

Add k-for directive #12

Description

@ChristoPy

Feature

Add a directive that loops over a received value.
The value can be: Array and Object.

Considering the model

{
  basket: ['milk', 'eggs', 'banana'],
  user: {
    name: 'John Doe',
    age: 100,
    address: 'Earth'
  }
}

The directive should work with the following sintaxes:

Array loop

Markup

<div k-for="item in basket">
  <p k-text="item"></p>
<div>

Rendered

<p k-text="item">milk</p>
<p k-text="item">eggs</p>
<p k-text="item">bananas</p>

Object loop

Markup

<div k-for="info in user">
  <p k-text="info"></p>
<div>

Rendered

<p k-text="info">John Doe</p>
<p k-text="info">107</p>
<p k-text="info">Earth</p>

Implementation observations

  • See how this can be achieved, apparently, it can be done with the template tag.
  • The directive should not manipulate the elements directly but change the scope of where the data should be bound.
  • The directive should run before all others, because the scopes should be changed before they execute.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions