您的位置：首页 > Web前端 > JavaScript

Emberjs搜索

2015-08-05 09:08 519 查看

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>

<script>
ENV = { ENABLE_ALL_FEATURES: true };
</script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
<script src="http://s3.amazonaws.com/machty/to_s3_uploads/ember-4546b9a2-011e-3510-c13f-a3fbe024bec5.js"></script>

</head>
</head>
<body>
<script type="text/x-handlebars" data-template-name="application">
<h3>Ember Query Params: search</h3>
<form {{action "search" on="submit"}}>
{{input value=queryField}}
<input type="submit" value="Search"/>
</form>

{{#if query}}
<p>Displaying results for "{{query}}"</p>

<ul>
{{#each}}
<li>{{this}}</li>
{{/each}}
</ul>
{{/if}}
</script>
</body>
</html>

js：

App = Ember.Application.create();

App.ApplicationController = Ember.ArrayController.extend({
queryParams: ['query'],
query: null,

queryField: Ember.computed.oneWay('query'),
actions: {
search: function() {
this.set('query', this.get('queryField'));
}
}
});

var words = "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab illum labore quis ipsam voluptate sunt reprehenderit iure nisi sit ut inventore illo porro. Eveniet odio sed corporis distinctio tempore temporibus!".toLowerCase().split(' ');
App.ApplicationRoute = Ember.Route.extend({
model: function(params) {
if (!params.query) {
return []; // no results;
}

var regex = new RegExp(params.query);
return words.filter(function(word) {
return regex.exec(word);
});
},
actions: {
queryParamsDidChange: function() {
// opt into full refresh
this.refresh();
}
}
});

jsbin源码

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航