geleto

<template>
  
  <select value.two-way="optionId">
		<option repeat.for="choice of options" value.bind="$index">${choice}</option>)
	</select>
	<label>Number</label>
  
  <br><br>
  
  <select value.two-way="optionId2">

geleto

<template>
  <div repeat.for="i of messages.length">
    <input type="text" value.bind="$parent.messages[i]" input.delegate="onMessageChanged()">
  </div>
</template>

geleto

<template>
  <require from="./test"></require>
  <test></test>
</template>

geleto

<template>

  <label>Car</label>
	<select value.bind="selectedCar">
		<option repeat.for="car of cars" model.bind="car">${car.name}</option>)
	</select>
	<br>
	Selected car: <b>${selectedCar.name}</b>
	<br>
	<br>

geleto

<template>

  <label>Car</label>
	<select value.bind="selectedCar">
		<option repeat.for="car of cars" model.bind="car">${car.name}</option>)
	</select>
	<br>
	Selected car: <b>${selectedCar.name}</b>
	<br>
	<button click.delegate="selectCar(0)">Select Audi</button>

geleto

.group{
  display:block;
  width:300px;
  border: 2px dashed blue;
  padding:10px;
}
.item{
  width:260px;
  margin:10px;
  border: 2px dashed blue;

geleto

<template>
  <div repeat.for="i of messages.length">
    <input type="text" value.bind="$parent.messages[i]" input.delegate="onMessageChanged()">
  </div>
</template>

geleto

<template>
  <h3>Change any value except the first</h3>
  <div repeat.for="i of messages.length">
    <input type="text" value.bind="$parent.messages[i]" input.delegate="onMessageChanged()">
  </div>
  <h4>Notice how the change is also applied to an unrelated sibling element</h4>
</template>

geleto

<template>
  <div repeat.for="msg of messages">
    <input type="text" value.bind="msg" input.delegate="onMessageChanged(msg, $index)">
  </div>
</template>

geleto

<template>
  <div repeat.for="msg of messages">
    <input type="text" value.bind="msg" input.delegate="onMessageChanged(msg, $index)">
  </div>
</template>