In this code, I get an empty <option> element at the top of the select element box.
I don't have a blank item in the Map that it's bound to. Is this how template repeat works for ? Or am I missing something obvious? Or is it a bug?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample app</title>
<link rel="stylesheet" href="multiselect.css">
</head>
<body>
<h1>Multiselect</h1>
What books have you read? Choose all that apply.<br>
<div id="sample_container_id">
<template if='!books.isEmpty'>
<!-- Why am I getting an empty one? -->
<select multiple
on-change="changeselected($event)"
id="bookselector">
<option template repeat="key in books.keys" value="{{key}}">{{key}}</option>
</select>
<p>You chose:</p>
<ul>
<li template repeat='selected in booksselected'>{{selected}}</li>
</ul>
</template>
</div>
<script type="application/dart">
import 'dart:html';
import 'package:web_ui/web_ui.dart';
int selectedIndex = 1;
final Map<String, bool> books = toObservable(
{ 'The Cat in the Hat': true, 'War and Peace': false,
'Pride and Prejudice': true, 'On the Road': true,
'The Hunger Games': true, 'The Java Tutorial': false,
'The Joy of Cooking': false, 'Goodnight Moon': true }
);
void main() {
}
List<String> get booksselected {
// Return the keys of the selected items.
return books.keys.where((c) => books[c]).toList();
}
void changeselected(Event e) {
// Get the selected elements.
List<OptionElement> options = (query('#bookselector') as SelectElement).selectedOptions;
// Set everything to false temporarily.
books.forEach((k, v) => books[k] = false);
// Set true for selected items.
options.forEach((e) => books[e.value] = true);
}
</script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
