Permalink
Browse files

Add `active` class to current search

This commit also causes searches that are
caused by the URL change to be added to recents,
as well as improving performance by using plain
Handlebars for cases where the data does not
update.
  • Loading branch information...
1 parent b16cbe0 commit ed52a5b0f0de9506fb7010b37ce0d3f1a959b76d @tomdale committed Jul 2, 2012
View
@@ -8,7 +8,9 @@ define([
'app/views/application_view',
'app/views/recents_view',
+ 'app/views/recents_item_view',
'app/views/results_view',
+ 'app/views/results_item_view',
'app/views/search_view'
], function(Ember) {
var router = Ember.Router.extend({
@@ -32,23 +34,32 @@ define([
performSearch: function(router) {
var query = router.getPath('searchController.query');
- var recentsController = router.get('recentsController');
-
- recentsController.addQuery(query);
router.transitionTo('result', query);
},
+ searchRecent: function(router, event) {
+ router.setPath('searchController.query', event.context);
+ router.send('performSearch');
+ },
+
+ eventTransitions: {
+ searchRecent: 'result'
+ },
+
index: Ember.Route.extend({
route: '/'
}),
result: Ember.Route.extend({
route: '/search/:query',
- connectOutlets: function(router, context) {
+ connectOutlets: function(router, query) {
+ var recentsController = router.get('recentsController');
var applicationController = router.get('applicationController');
+
+ recentsController.addQuery(query);
applicationController.connectOutlet('results');
- router.get('resultsController').fetch(context);
+ router.get('resultsController').fetch(query);
},
serialize: function(router, context) {
@@ -1,8 +1,10 @@
<div class="component recent-searches">
<h3>Recent Searches</h3>
<ul class="nav nav-pills nav-stacked js-searches">
- {{#each recent in controller}}
- <li>{{recent}}</li>
+ {{#each controller}}
+ {{#view Srchr.RecentsItemView classBinding="isActive:active"}}
+ <a {{action searchRecent href=true}}>{{this}}</a>
+ {{/view}}
{{/each}}
</ul>
</div>
@@ -7,25 +7,8 @@
</ul>
{{#if controller.length}}
- <section>
- {{#each result in controller}}
- <div class="result {{result.type}}">
- <div class="row-fluid">
- <div class="span2">
- <img {{bindAttr src="result.thumb"}} width="100">
- </div>
- <div class="span9">
- {{#if result.title}}
- <h3><a href="{{result.link}}">{{result.title}}</a></h3>
- {{else}}
- <p><a href="{{result.link}}">view original</a></p>
- {{/if}}
- <p>{{result.content}}</p>
- </div>
- <div class="span1"><i class="{{result.icon}}"></i></div>
- </div>
- <hr>
- </div>
+ {{#each controller}}
+ {{view Srchr.ResultsItemView}}
{{/each}}
{{else}}
<section>Loading ...</section>
@@ -0,0 +1,17 @@
+<div class="result {{type}}">
+ <div class="row-fluid">
+ <div class="span2">
+ <img src="{{thumb}}" width="100">
+ </div>
+ <div class="span9">
+ {{#if title}}
+ <h3><a href="{{link}}">{{title}}</a></h3>
+ {{else}}
+ <p><a href="{{link}}">view original</a></p>
+ {{/if}}
+ <p>{{content}}</p>
+ </div>
+ <div class="span1"><i class="{{icon}}"></i></div>
+ </div>
+ <hr>
+</div>
@@ -0,0 +1,13 @@
+define([ 'Ember' ], function(Ember) {
+ Srchr.RecentsItemView = Ember.View.extend({
+ tagName: 'li',
+
+ isActive: function() {
+ var context = this.get('context'),
+ controller = this.get('controller');
+
+ return context === controller.objectAt(0);
+ }.property('controller.@each')
+ });
+});
+
@@ -0,0 +1,8 @@
+define([ 'Ember', 'text!templates/results_item.handlebars' ], function(Ember, tpl) {
+ Ember.TEMPLATES.results_item = Handlebars.compile(tpl);
+
+ Srchr.ResultsItemView = Ember.View.extend({
+ templateName: 'results_item'
+ });
+});
+

0 comments on commit ed52a5b

Please sign in to comment.