Created
October 19, 2014 19:01
-
-
Save fishermand46/fd61573f81f84965cdaf to your computer and use it in GitHub Desktop.
// source http://jsbin.com/pudaz
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <title>JS Bin</title> | |
| <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.3.0.js"></script> | |
| <script src="http://builds.emberjs.com/tags/v1.7.0/ember.js"></script> | |
| <script src="http://builds.emberjs.com/tags/v1.0.0-beta.9/ember-data.min.js"></script> | |
| </head> | |
| <body> | |
| <script type="text/x-handlebars" data-template-name="application"> | |
| <h1>ember-latest jsbin</h1> | |
| {{outlet}} | |
| </script> | |
| <script type="text/x-handlebars" data-template-name="index"> | |
| <h2>Apple Ratings</h2> | |
| <ul> | |
| {{#each persistedModels}} | |
| <li>{{apple-item model=this}}</li> | |
| {{/each}} | |
| </ul> | |
| {{input placeholder="Name..." value=newApple.name}} | |
| {{input placeholder="Rating..." value=newApple.rating}} | |
| <button {{action "saveApple" newApple}}>Save</button> | |
| </script> | |
| <script type="text/x-handlebars" data-template-name="components/apple-item"> | |
| <p>{{model.name}}: {{model.rating}}</p> | |
| <button {{action "incrementRating" model}}>Increment Rating</button> | |
| <button {{action "saveRating" model}}>Save Rating</button> | |
| {{viewState}} | |
| </script> | |
| <script id="jsbin-javascript"> | |
| App = Ember.Application.create(); | |
| App.ApplicationAdapter = DS.FixtureAdapter; | |
| Ember.computed.filterIgnoreSpuriousChanges = function(dependentKey, callback) { | |
| var didPropertyChange = function(item, changeMeta) { | |
| var previousValues = changeMeta.previousValues; | |
| var observedProperty; | |
| if(!previousValues) { return true; } | |
| observedProperty = Object.keys(previousValues)[0]; | |
| return item.get(observedProperty) !== previousValues[observedProperty]; | |
| }; | |
| var options = { | |
| initialize: function (array, changeMeta, instanceMeta) { | |
| instanceMeta.filteredArrayIndexes = new Ember.SubArray(); | |
| }, | |
| addedItem: function(array, item, changeMeta, instanceMeta) { | |
| if(!didPropertyChange(item, changeMeta)) { return array; } | |
| var match = !!callback.call(this, item), | |
| filterIndex = instanceMeta.filteredArrayIndexes.addItem(changeMeta.index, match); | |
| if (match) { | |
| array.insertAt(filterIndex, item); | |
| } | |
| return array; | |
| }, | |
| removedItem: function(array, item, changeMeta, instanceMeta) { | |
| if(!didPropertyChange(item, changeMeta)) { return array; } | |
| var filterIndex = instanceMeta.filteredArrayIndexes.removeItem(changeMeta.index); | |
| if (filterIndex > -1) { | |
| array.removeAt(filterIndex); | |
| } | |
| return array; | |
| } | |
| }; | |
| return Ember.arrayComputed(dependentKey, options); | |
| }; | |
| App.Apple = DS.Model.extend({ | |
| name: DS.attr('string'), | |
| rating: DS.attr('number') | |
| }); | |
| App.Apple.FIXTURES = [ | |
| {id: 1, name: 'Granny Smith', rating: 7}, | |
| {id: 2, name: 'Fuji', rating: 10}, | |
| {id: 3, name: 'Gala', rating: 6} | |
| ]; | |
| App.IndexRoute = Ember.Route.extend({ | |
| model: function() { | |
| return this.store.find('apple'); | |
| } | |
| }); | |
| App.NewAppleRoute = Ember.Route.extend({ | |
| model: function() { | |
| return this.store.createRecord('apple'); | |
| } | |
| }); | |
| App.IndexController = Ember.Controller.extend({ | |
| initialize: Ember.observer(function() { | |
| this.set('newApple', this.store.createRecord('apple')); | |
| }).on('init'), | |
| persistedModels: Ember.computed.filter('[email protected]', function(model) { | |
| return !model.get('isNew'); | |
| }), | |
| // persistedModels: Ember.computed.filterBy('model', 'isNew', false), | |
| actions: { | |
| saveApple: function(model) { | |
| model.save(); | |
| Ember.run.scheduleOnce('afterRender', function() { | |
| this.set('newApple', this.store.createRecord('apple')); | |
| }.bind(this)); | |
| } | |
| } | |
| }); | |
| App.AppleItemComponent = Ember.Component.extend({ | |
| viewState: 'initalState', | |
| actions: { | |
| incrementRating: function(model) { | |
| this.set('viewState', 'newState'); | |
| model.incrementProperty('rating'); | |
| }, | |
| saveRating: function(model) { | |
| model.save(); | |
| } | |
| } | |
| }); | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">App = Ember.Application.create(); | |
| App.ApplicationAdapter = DS.FixtureAdapter; | |
| Ember.computed.filterIgnoreSpuriousChanges = function(dependentKey, callback) { | |
| var didPropertyChange = function(item, changeMeta) { | |
| var previousValues = changeMeta.previousValues; | |
| var observedProperty; | |
| if(!previousValues) { return true; } | |
| observedProperty = Object.keys(previousValues)[0]; | |
| return item.get(observedProperty) !== previousValues[observedProperty]; | |
| }; | |
| var options = { | |
| initialize: function (array, changeMeta, instanceMeta) { | |
| instanceMeta.filteredArrayIndexes = new Ember.SubArray(); | |
| }, | |
| addedItem: function(array, item, changeMeta, instanceMeta) { | |
| if(!didPropertyChange(item, changeMeta)) { return array; } | |
| var match = !!callback.call(this, item), | |
| filterIndex = instanceMeta.filteredArrayIndexes.addItem(changeMeta.index, match); | |
| if (match) { | |
| array.insertAt(filterIndex, item); | |
| } | |
| return array; | |
| }, | |
| removedItem: function(array, item, changeMeta, instanceMeta) { | |
| if(!didPropertyChange(item, changeMeta)) { return array; } | |
| var filterIndex = instanceMeta.filteredArrayIndexes.removeItem(changeMeta.index); | |
| if (filterIndex > -1) { | |
| array.removeAt(filterIndex); | |
| } | |
| return array; | |
| } | |
| }; | |
| return Ember.arrayComputed(dependentKey, options); | |
| }; | |
| App.Apple = DS.Model.extend({ | |
| name: DS.attr('string'), | |
| rating: DS.attr('number') | |
| }); | |
| App.Apple.FIXTURES = [ | |
| {id: 1, name: 'Granny Smith', rating: 7}, | |
| {id: 2, name: 'Fuji', rating: 10}, | |
| {id: 3, name: 'Gala', rating: 6} | |
| ]; | |
| App.IndexRoute = Ember.Route.extend({ | |
| model: function() { | |
| return this.store.find('apple'); | |
| } | |
| }); | |
| App.NewAppleRoute = Ember.Route.extend({ | |
| model: function() { | |
| return this.store.createRecord('apple'); | |
| } | |
| }); | |
| App.IndexController = Ember.Controller.extend({ | |
| initialize: Ember.observer(function() { | |
| this.set('newApple', this.store.createRecord('apple')); | |
| }).on('init'), | |
| persistedModels: Ember.computed.filter('[email protected]', function(model) { | |
| return !model.get('isNew'); | |
| }), | |
| // persistedModels: Ember.computed.filterBy('model', 'isNew', false), | |
| actions: { | |
| saveApple: function(model) { | |
| model.save(); | |
| Ember.run.scheduleOnce('afterRender', function() { | |
| this.set('newApple', this.store.createRecord('apple')); | |
| }.bind(this)); | |
| } | |
| } | |
| }); | |
| App.AppleItemComponent = Ember.Component.extend({ | |
| viewState: 'initalState', | |
| actions: { | |
| incrementRating: function(model) { | |
| this.set('viewState', 'newState'); | |
| model.incrementProperty('rating'); | |
| }, | |
| saveRating: function(model) { | |
| model.save(); | |
| } | |
| } | |
| });</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| App = Ember.Application.create(); | |
| App.ApplicationAdapter = DS.FixtureAdapter; | |
| Ember.computed.filterIgnoreSpuriousChanges = function(dependentKey, callback) { | |
| var didPropertyChange = function(item, changeMeta) { | |
| var previousValues = changeMeta.previousValues; | |
| var observedProperty; | |
| if(!previousValues) { return true; } | |
| observedProperty = Object.keys(previousValues)[0]; | |
| return item.get(observedProperty) !== previousValues[observedProperty]; | |
| }; | |
| var options = { | |
| initialize: function (array, changeMeta, instanceMeta) { | |
| instanceMeta.filteredArrayIndexes = new Ember.SubArray(); | |
| }, | |
| addedItem: function(array, item, changeMeta, instanceMeta) { | |
| if(!didPropertyChange(item, changeMeta)) { return array; } | |
| var match = !!callback.call(this, item), | |
| filterIndex = instanceMeta.filteredArrayIndexes.addItem(changeMeta.index, match); | |
| if (match) { | |
| array.insertAt(filterIndex, item); | |
| } | |
| return array; | |
| }, | |
| removedItem: function(array, item, changeMeta, instanceMeta) { | |
| if(!didPropertyChange(item, changeMeta)) { return array; } | |
| var filterIndex = instanceMeta.filteredArrayIndexes.removeItem(changeMeta.index); | |
| if (filterIndex > -1) { | |
| array.removeAt(filterIndex); | |
| } | |
| return array; | |
| } | |
| }; | |
| return Ember.arrayComputed(dependentKey, options); | |
| }; | |
| App.Apple = DS.Model.extend({ | |
| name: DS.attr('string'), | |
| rating: DS.attr('number') | |
| }); | |
| App.Apple.FIXTURES = [ | |
| {id: 1, name: 'Granny Smith', rating: 7}, | |
| {id: 2, name: 'Fuji', rating: 10}, | |
| {id: 3, name: 'Gala', rating: 6} | |
| ]; | |
| App.IndexRoute = Ember.Route.extend({ | |
| model: function() { | |
| return this.store.find('apple'); | |
| } | |
| }); | |
| App.NewAppleRoute = Ember.Route.extend({ | |
| model: function() { | |
| return this.store.createRecord('apple'); | |
| } | |
| }); | |
| App.IndexController = Ember.Controller.extend({ | |
| initialize: Ember.observer(function() { | |
| this.set('newApple', this.store.createRecord('apple')); | |
| }).on('init'), | |
| persistedModels: Ember.computed.filter('[email protected]', function(model) { | |
| return !model.get('isNew'); | |
| }), | |
| // persistedModels: Ember.computed.filterBy('model', 'isNew', false), | |
| actions: { | |
| saveApple: function(model) { | |
| model.save(); | |
| Ember.run.scheduleOnce('afterRender', function() { | |
| this.set('newApple', this.store.createRecord('apple')); | |
| }.bind(this)); | |
| } | |
| } | |
| }); | |
| App.AppleItemComponent = Ember.Component.extend({ | |
| viewState: 'initalState', | |
| actions: { | |
| incrementRating: function(model) { | |
| this.set('viewState', 'newState'); | |
| model.incrementProperty('rating'); | |
| }, | |
| saveRating: function(model) { | |
| model.save(); | |
| } | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment