Question

在此代码中，我在<option>元素框的顶部显示一个空的select元素。地图中没有一个空白项目，它必然会被绑定。这是template repeat的工作原理吗？还是我错过了一些明显的东西？或者这是一个错误？

<!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>

为什么我在<select multiple =“”>元素</select> </option>中得到空<option>元素

0 个答案: