小编mel*_*mac的帖子

Dart Polymer:如何过滤repeat-template中的元素?

我正在使用Dart Polymer的重复模板来显示列表项.现在,我想实现一个搜索过滤器,其中只显示与输入的搜索词相关的项目.请考虑以下代码:

我-element.html

<polymer-element name="my-element">
  <script type="application/dart" src="my-element.dart"></script>
  <template>
    <input type="text" value="{{ searchTerm }}">
    <ul>
      <template repeat="{{ item in items }}">
        <template if="{{ matchesSearchFilter(item) }}">
          <li>{{ item }}</li>
        </template>
      </template>
    </ul>
  </template>
</polymer-element> 
Run Code Online (Sandbox Code Playgroud)

我-element.dart

@CustomTag('my-element')
class MyElement extends PolymerElement {
  @observable List<String> items = toObservable(["Monday", "Tuesday", "Wednesday"]);
  @observable String searchTerm = '';

  MyElement.created() : super.created();

  matchesSearchFilter(String item) {
    if (searchTerm.isEmpty) return true;
    return item.toLowerCase().contains(searchTerm.toLowerCase());
  }
} 
Run Code Online (Sandbox Code Playgroud)

例如,当我在文本框中键入"Mo"时,我希望项目列表会自动更新,这样只显示"星期一".但是,在键入任何搜索词时,列表保持不变,并忽略搜索词.

那么,如何正确实现这样的功能呢?

dart dart-polymer

7
推荐指数
1
解决办法
3244
查看次数

如何使用和迭代Dart Polymer中的可观察地图?

请考虑以下代码:

myexample.html

<polymer-element name="my-example">
  <script type="application/dart" src="myexample.dart"></script>
  <template>
    <style></style>
    <div>
    <ul>
        <template repeat="{{ entry in map.values }}">
          <li>{{ entry }}</li>
        </template>
    </ul>
    <button on-click="{{add}}">Add</button>
    </div>
  </template>
</polymer-element>
Run Code Online (Sandbox Code Playgroud)

myexample.dart

@CustomTag('my-example')
class MyExample extends PolymerElement {
  @observable Map<int, String> map = toObservable({});
  int i = 0;

  MyExample.created() : super.created();

  void add() {
    map[i++] = i.toString();
  }
}
Run Code Online (Sandbox Code Playgroud)

每次单击"添加"按钮时都会填充地图,但地图条目不会显示在myexample.html中.那么:如何正确使用(并迭代)一个可观察的Map,以便html文件中的列表自动更新?

dart dart-polymer

5
推荐指数
1
解决办法
1934
查看次数

Dart:如何在调试和生产模式下使用不同的设置?

有没有想法如何设置我的Dart应用程序在调试模式(在Dartium中运行)和生产模式中使用不同的设置?

例如,我在我的应用程序中使用PouchDb,它将数据库复制到特定的CouchDb实例,由url给出:db.replicateTo(url); 在调试模式下,我想使用另一个CouchDb实例(另一个url)而不是生产模式.

那么,有没有任何想法或方法,在两种模式下使用不同的设置?

dart

5
推荐指数
1
解决办法
720
查看次数

标签 统计

dart ×3

dart-polymer ×2