我正在使用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"时,我希望项目列表会自动更新,这样只显示"星期一".但是,在键入任何搜索词时,列表保持不变,并忽略搜索词.
那么,如何正确实现这样的功能呢?
请考虑以下代码:
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应用程序在调试模式(在Dartium中运行)和生产模式中使用不同的设置?
例如,我在我的应用程序中使用PouchDb,它将数据库复制到特定的CouchDb实例,由url给出:db.replicateTo(url);
在调试模式下,我想使用另一个CouchDb实例(另一个url)而不是生产模式.
那么,有没有任何想法或方法,在两种模式下使用不同的设置?