flow-repeat #

@furo/fbp v6.11.0
import '@furo/fbp/src/flow-repeat.js';
exports FlowRepeat js
exports <flow-repeat> custom-element-definition
superclass HTMLElement
mixes FBP
summary Custom element to allow using FBPs template features in repeated template

flow-repeat

Custom element to repeat Arrays. The repeated items are injected before the flow-repeat element. If you need the repeated items inside of an other dom node, use setInsertRef

1
2
3
4
5

<flow-repeat ƒ-inject-items="--dataArray">
  <template>
    <repeated-item index="${this.index}" ƒ-inject="--init">
  </template>
</flow-repeat>

Note: if you want to bind a repeater node, use furo-data-flow-repeat.

Available wires in the template: #

Note: Each repeated item has its own closed scope. You can not use the wires outside of the template. Use events to interact with components outside of the template.

• --init : contains the repeated item, fired only once on creation of the repeated node
• --item : contains the repeated item, fired on every inject
• --firstItem : contains the repeated item, fired on the first element.
• --lastItem : contains the repeated item, fired on the last element.
• --index : contains a number with the index of the element.
• --host : contains a reference to the host component.
• --trigger : contains what was passed in to the triggering method.
• --triggerFirst : contains what was passed in to the triggering method.
• --triggerLast : contains what was passed in to the triggering method.
• --itemSelected : contains true, is triggered with select(index).
• --itemDeSelected : contains false, is triggered when another item is selected with select(index).

Available attributes #

index contains the current index of the item. Use this to fire a event with an index like @-click="^^item-clicked(index)" item contains the current index of the item. Use this to fire a event with the repeated item like @-click="^^item-selected(item)"

Attributes and Properties #

Events #

last-element-selected #

at-last-element-selected → index of the element

Fired when the last element is selected. Use this to trigger a load next.

items-in-dom #

at-items-in-dom → Number

Fired when items are attached to the dom, with Number of items.

Methods #

clear #

clear() ⟹ void

* → fn-clear

Clear the list

select #

select(index int ) ⟹ void

int → fn-select

Triggers the wire --itemSelected on selected item and --itemDeSelected on last selected Item.

• index Index of item to select
  
  

selectIdentity #

selectIdentity(identifier * ) ⟹ void

* → fn-select-identity

Select item by its identity.

Using this method only works when you have set the identity-path.

• identifier Identity from identity-path
  
  

selectNextIndex #

selectNextIndex() ⟹ void

* → fn-select-next-index

Selects next index. If none was selected, the first index will be selected.

If you reached the last index, the first index will be selected.

If you reach the last element, last-element-selected will fire.

Triggers the wire --itemSelected on selected item and --itemDeSelected on last selected Item

selectPreviousIndex #

selectPreviousIndex() ⟹ void

* → fn-select-previous-index

Selects the previous index.

If you are on the first item, the last will be selected.

Triggers the wire --itemSelected on selected item and --itemDeSelected on last selected Item

triggerSelected #

triggerSelected(data * ) ⟹ void

* → fn-trigger-selected

Triggers the currently selected item.

Triggers the wire --trigger on the every item.

Triggers the wire --triggerIndex on the every item.

• data Data to forward.
  
  

triggerAll #

triggerAll(data * ) ⟹ void

* → fn-trigger-all

Triggers all nodes.

Triggers the wire --trigger on the every item.

Triggers the wire --triggerIndex on the every item.

• data data to forward
  
  

deselect #

deselect() ⟹ void

* → fn-deselect

Triggers the wire --itemDeSelected on the last selected item

setInsertRef #

setInsertRef(ref DomNode ) ⟹ void

DomNode → fn-set-insert-ref

Set a reference to append the repeated elements in to the ref instead of appending them before the repeater itself.

• ref Node to append the repeated items.
  
  

deselectAll #

deselectAll() ⟹ void

* → fn-deselect-all

Triggers the wire --itemDeSelected on all items

injectItems #

injectItems(items Array ) ⟹ void

Array → fn-inject-items

Inject items to repeat.

• items Items to repeat
  
  

triggerFirst #

triggerFirst(data * ) ⟹ void

* → fn-trigger-first

Triggers the wire --trigger on the first item.

Triggers the wire –triggerFirst on the first item.

• data data to forward to the item.
  
  

triggerLast #

triggerLast(data * ) ⟹ void

* → fn-trigger-last

Triggers the wire --trigger on the last item.

Triggers the wire –triggerLast on the last item.

• data data to forward to the item.
  
  

triggerIndex #

triggerIndex(i int data * ) ⟹ void

int * → fn-trigger-index

Triggers the wire --trigger on the item.

Triggers the wire --triggerIndex on the item.

• i index of item that you want to trigger.
• data data to forward to the item.