Skip to content

Instantly share code, notes, and snippets.

@jekiii

jekiii/index.html

Forked from anonymous/index.html
Last active August 29, 2015 14:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jekiii/d6cebd22490f4f0395ca to your computer and use it in GitHub Desktop.
Save jekiii/d6cebd22490f4f0395ca to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
<style id="jsbin-css">
/* Put your CSS here */
html, body {
margin: 20px;
}
</style>
</head>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each item in model}}
<li>{{item.color}}</li>
{{/each}}
</ul>
Filtered:
By: {{input value=daFilter}}
<ul>
{{#each item in filtered}}
<li>{{item.color}}</li>
{{/each}}
</ul>
{{auto-complete model=model filterByPath='color' visualPath='color'}}
</script>
<script type="text/x-handlebars"s data-template-name="components/auto-complete">
{{input type="text" value=searchText placeholder="Search..."}}
<ul>
{{#each searchResults}}
<li>{{this}}</li>
{{/each}}
</ul>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"></script>
<script src="http://builds.emberjs.com/tags/v1.2.0/ember.min.js"></script>
<script id="jsbin-javascript">
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return [{color:'red'}, {color:'yellow'}, {color:'blue'}];
}
});
App.IndexController = Em.ArrayController.extend({
daFilter: 'blue',
filtered: function(){
return this.get('model').filterBy('color', this.get('daFilter'));
}.property('model.@each.color', 'daFilter')
});
App.AutoCompleteComponent = Ember.Component.extend({
searchText: null,
searchResults: function() {
var model = this.get('model');
var searchText = this.get('searchText');
var visualPath = this.get('visualPath');
console.log(this.get('model')); // shows array
if (searchText){
console.log('searching for: ' + searchText); // shows up in console with searchText
var regex = new RegExp(searchText, 'i');
model = model.filterBy(this.get('filterByPath'), searchText);
}
return model.getEach(visualPath);
}.property('searchText')
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
</head>
<body>
<script type="text/x-handlebars">
<h2>Welcome to Ember.js</h2>
{{outlet}}
<\/script>
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each item in model}}
<li>{{item.color}}</li>
{{/each}}
</ul>
Filtered:
By: {{input value=daFilter}}
<ul>
{{#each item in filtered}}
<li>{{item.color}}</li>
{{/each}}
</ul>
{{auto-complete model=model filterByPath='color' visualPath='color'}}
<\/script>
<script type="text/x-handlebars"s data-template-name="components/auto-complete">
{{input type="text" value=searchText placeholder="Search..."}}
<ul>
{{#each searchResults}}
<li>{{this}}</li>
{{/each}}
</ul>
<\/script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"><\/script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.1.2.js"><\/script>
<script src="http://builds.emberjs.com/tags/v1.2.0/ember.min.js"><\/script>
</body>
</html>
</script>
<script id="jsbin-source-css" type="text/css">/* Put your CSS here */
html, body {
margin: 20px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return [{color:'red'}, {color:'yellow'}, {color:'blue'}];
}
});
App.IndexController = Em.ArrayController.extend({
daFilter: 'blue',
filtered: function(){
return this.get('model').filterBy('color', this.get('daFilter'));
}.property('model.@each.color', 'daFilter')
});
App.AutoCompleteComponent = Ember.Component.extend({
searchText: null,
searchResults: function() {
var model = this.get('model');
var searchText = this.get('searchText');
var visualPath = this.get('visualPath');
console.log(this.get('model')); // shows array
if (searchText){
console.log('searching for: ' + searchText); // shows up in console with searchText
var regex = new RegExp(searchText, 'i');
model = model.filterBy(this.get('filterByPath'), searchText);
}
return model.getEach(visualPath);
}.property('searchText')
});</script></body>
</html>
Raw
jsbin.oTIxAjI.css
/* Put your CSS here */
html, body {
margin: 20px;
}
Raw
jsbin.oTIxAjI.js
App = Ember.Application.create();
App.Router.map(function() {
// put your routes here
});
App.IndexRoute = Ember.Route.extend({
model: function() {
return [{color:'red'}, {color:'yellow'}, {color:'blue'}];
}
});
App.IndexController = Em.ArrayController.extend({
daFilter: 'blue',
filtered: function(){
return this.get('model').filterBy('color', this.get('daFilter'));
}.property('model.@each.color', 'daFilter')
});
App.AutoCompleteComponent = Ember.Component.extend({
searchText: null,
searchResults: function() {
var model = this.get('model');
var searchText = this.get('searchText');
var visualPath = this.get('visualPath');
console.log(this.get('model')); // shows array
if (searchText){
console.log('searching for: ' + searchText); // shows up in console with searchText
var regex = new RegExp(searchText, 'i');
model = model.filterBy(this.get('filterByPath'), searchText);
}
return model.getEach(visualPath);
}.property('searchText')
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment