Last active
November 16, 2016 20:05
-
-
Save raila/4587521 to your computer and use it in GitHub Desktop.
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
# ROUTER | |
GWS.Router.map (match) -> | |
#match("/").to("home") # home.handlebars gets rendered automatically and mapped to / | |
# according to guide the previous logic shouldn't be needed. but it won't work without it | |
# you can either use model: () -> or | |
# setupController: (controller, model) -> | |
# controller.set 'content', model | |
# | |
# | |
How to find a model by any attribute in Ember.js | |
https://gist.github.com/4ecdd3b21853391f1b97 | |
# | |
# | |
Q: progressbar | |
A: | |
App.ProgressView = Ember.View.extend({ | |
percentChanged: function() { | |
percentString = (this.get('controller.percentComplete') + "%"); | |
this.$('.bar').css('width', percentString); | |
}.observes('controller.percentComplete') | |
}); | |
# | |
# | |
cut and paste | |
https://github.com/emberjs/ember.js/commit/4a5ba408aa5f3ac1d40b53e8fe157ba295885e1e | |
# | |
# | |
BREAKING CHANGE to router events signature | |
https://github.com/emberjs/ember.js/commit/6dab9beccf4a2ae700633dfd4811018e0bea5028 | |
# | |
# | |
http://stackoverflow.com/questions/14305255/ember-automatically-redirect-to-firstobject | |
redirect: -> | |
setupControllers: -> | |
doctor = @modelFor('doctors').get('firstObject'); | |
# | |
# | |
{{each controller itemViewClass="App.FooView" tagName="ul"}} | |
# | |
# | |
getting all templates | |
Ember.TEMPLATES | |
# | |
# | |
https://github.com/emberjs/ember.js/issues/1747 | |
automatically render sidebar.handlebar into html | |
{{render sidebar}} | |
{{render sidebar}} -> App.SidebarController | |
{{render "song" song}} | |
This example will render the song template with an instance of App.SongController and App.SongView. It will set the song controller's model to the value of song in the current context. | |
{{template sidebar}} -> uses the current context/controller | |
{{render "search"}} | |
it will lookup the searchController, then instantiate a SearchView and connect them. | |
{{partial sidebar}} | |
https://peepcode.com/system/uploads/2013/peepcode-emberjs-partial.png | |
https://github.com/emberjs/ember.js/commit/015138ea569725811b43e0fd851dfd0c08446890 | |
{{render}} uses the same named controller and template in the current context. If a view class with the same name exists, it uses that view class. If a model is specified, it becomes the model for that controller. Default target will be that same controller. | |
{{control}} uses a new instance of the named controller, instead of a singleton of the named controller. | |
{{partial}} dumps the same template into place, with the same container, and the current controller. The template name must start with an underscore. | |
# | |
# | |
Add `action` support to Ember.TextField, | |
The action to be sent when the user presses the return key. | |
https://github.com/emberjs/ember.js/commit/da4aa8531f337811c69e86300d81352fc1dab241 | |
# | |
# | |
sortable-collection-view.js.coffee | |
https://gist.github.com/4536276 | |
# | |
# | |
http://stackoverflow.com/questions/14349485/ember-js-router-v2-and-injected-controllers | |
# | |
# | |
http://stackoverflow.com/questions/14313295/using-a-non-id-dynamic-parameter-with-the-ember-router-v2 | |
model: (params) -> # deserialize | |
serialize | |
# | |
# | |
The two possible values of embedded are: | |
load: The child records are embedded when loading, but should be saved as standalone records. In order for this to work, the child records must have an ID. | |
always: The child records are embedded when loading, and are saved embedded in the same record. This, of course, affects the dirtiness of the records (if the child record changes, the adapter will mark the parent record as dirty). | |
http://stackoverflow.com/questions/14320925/how-to-make-embedded-hasmany-relationships-work-with-ember-data | |
# | |
# | |
Added failing tests for saving embedded records | |
https://github.com/emberjs/data/pull/578 | |
# | |
# | |
Q: What is the diffence between resource and route | |
A: | |
resource - a thing | |
route - something to do with the thing | |
# | |
# | |
App.ClientRoute = Ember.Route.extend | |
# default: | |
# model: (params) -> # deserialize | |
# App.Client.find params.cĺient_id | |
# | |
# | |
Router | |
We don't necessarly need Views an Controllers! | |
when we have templates named like clients.handlebars, client.handlebars, ... | |
Router will instantiate them for us | |
# | |
# | |
serialize: (model) -> | |
console.log 'serialize', model, model.get('lastName'), model.id | |
# this will make the URL `/clients/tom_dale` | |
client_id: model.get('firstName') + '_' + model.get('lastName') | |
# | |
# | |
Q: what is the needs api | |
A: | |
http://darthdeus.github.com/blog/2013/01/27/controllers-needs-explained/ | |
http://www.kaspertidemann.com/simple-example-of-the-needs-api-in-ember-js/ | |
http://www.kaspertidemann.com/auto-synthesized-controllers-when-using-the-needs-api-in-ember-js/ | |
https://github.com/emberjs/ember.js/pull/1731 | |
App.ApplicationController = Ember.Controller.extend | |
needs: ['currentUser', 'users'] | |
#needs: 'users' | |
you can now access it via: | |
{{controllers.currentUser.content}} | |
{{action someAction target="controller.controllers.another"}} | |
# | |
# | |
App.container was not meant to be a public API | |
It appears that people are starting to use | |
App.container.lookup as the public API for | |
globally getting other controllers outside of the | |
router or other controllers. | |
This was not intended to be a public API. | |
Instead, you should trigger events on a route | |
(or a parent route), which have access to | |
`this.controllerFor`. | |
Example: | |
App.ApplicationRoute.extend({ | |
events: { | |
search: function(term) { | |
this.controllerFor('search') | |
.set('term', term); | |
} | |
} | |
}); | |
App.SearchField = Ember.TextField.extend({ | |
insertNewline: function() { | |
var term = this.get('value'), | |
controller = this.get('controller'); | |
controller.send('search', term); | |
this.set('value', ''); | |
} | |
}); | |
Events sent to the controller will bubble up to | |
the current route, and then up the route hierarchy | |
# | |
# | |
active item in list | |
http://jsbin.com/olovun/12/edit | |
App.NavView = Ember.View.extend({ | |
tagName: 'li', | |
classNameBindings: ['active'], | |
activeBinding: 'childViews.firstObject.active' | |
}); | |
we are going to add an {{activeWhen}} helper and it will make this whole thing a lot easier | |
https://github.com/emberjs/ember.js/issues/1822 | |
# | |
# | |
https://github.com/emberjs/ember.js/commit/b2e82aecf22c2654eb6e6894f5a0b82e2adfe5ed | |
https://github.com/emberjs/ember.js/blob/master/packages/ember/tests/helpers/link_to_test.js#L249 | |
Support string literals as param for {{linkTo}} | |
useful for filtering | |
{{#linkTo posts "all"}}All Posts{{/linkTo}} | |
{{#linkTo posts "popular"}}Popular{{/linkTo}} | |
this.route('posts', { path: '/posts/:filter' }); | |
{{#linkTo client client classBinding="client.selected" href=false tagName="article"}} | |
linkTo uses transitionTo behind the scenes. Whenever we use transitionTo, we actually provide the context/model directly and so the model method on the route is not called. In your example above, you have {{#linkTo example App.thing}}. Since we already known that the context is App.thing there's no reason to trigger the model method. We only call model on the route when we do not know what the model is. The main time this happens is when entering via a URL change. | |
# | |
# | |
ember pre4 fiddle | |
http://jsfiddle.net/sSdHm/ | |
older but on maybe sexier jsbin | |
http://jsbin.com/olovun/12/edit | |
# | |
# | |
get location / routerName | |
from router: | |
console.log @routeName, @get('router.location.location.hash') | |
from controller: | |
console.log @get('target.location.location.hash') | |
# | |
# | |
creating gifs from video | |
http://schneems.com/post/41104255619/use-gifs-in-your-pull-request-for-good-not-evil | |
# | |
# | |
Q: How can I redirect to a route from within a controller? | |
A: @transitionToRoute('clients') | |
# | |
# | |
Q: can anyone tell me how I can update a var within the application template please? | |
A: | |
App.Whatever.Route = Ember.Route.extend | |
setupController: (controller) -> | |
applicationController = @controllerFor('application') | |
applicationController.set 'title', 'new title' | |
# | |
# | |
Q: how can I call a method in the router from a controller | |
A: | |
App.WhateverController = Ember.ObjectController.extend | |
setTitle: -> | |
@send('setTitle', 'new title') | |
# | |
# | |
Q: how to set model in route | |
A: | |
model: -> @controllerFor("application").get("projects") | |
model: -> App.Client.find() | |
# | |
# | |
Q: ember-data error handling | |
A: | |
422 error marks the records as invalid | |
record.get('errors') | |
record.isValid => false | |
500 error marks the record as error | |
record.isError => true | |
# | |
# | |
Q: Can we listen to cut and paste event | |
A: | |
https://github.com/emberjs/ember.js/commit/4a5ba408aa5f3ac1d40b53e8fe157ba295885e1e | |
works on TextArea | |
cut: -> | |
paste :-> | |
# | |
# | |
Q: can we use the router without changing the url? | |
A: | |
http://emberjs.com/guides/routing/specifying-the-location-api/ | |
location: none | |
# | |
# | |
Q: what is {{debugger}} | |
A: Yes. The best way to do this from the javascript console is by using the handlebars {{debugger}} helper from your template. This will open the JS debug console in the context of your template. | |
# | |
# | |
Q: how to save a record | |
record.get('transaction').commit() | |
or if you want to save every dirty object in your app | |
record.get('store').commit() | |
# | |
@modelFor('clients.new').get('transaction').rollback() | |
# | |
# | |
http://stackoverflow.com/questions/14491347/accessing-the-model-from-the-template | |
{{content.id}} or {{content.nickname}} | |
it's a sign that you should change to an ObjectController. See EMBER GUIDES: REPRESENTING A SINGLE MODEL! for a more detailed explanation. | |
# | |
# | |
http://stackoverflow.com/questions/14495455/can-we-have-a-controller-for-the-child-item-view-specified-in-a-ember-collection | |
App.ProductsController = Ember.ArrayController.extend({ | |
... | |
itemController: 'Product', | |
... | |
}); | |
# | |
# | |
Q: how do i get a controller or model | |
A: | |
@modelFor('clients.new') | |
@controllerFor('clients') | |
@controllerFor('clients.new') | |
@modelFor('client') only works if model is set on route! | |
# | |
# | |
App.PostRoute = App.Route.extend({ | |
renderTemplate: function() { | |
this.render('myPost', { // the template to render | |
into: 'index', // the template to render into | |
outlet: 'detail', // the name of the outlet in that template | |
controller: 'blogPost' // the controller to use for the template | |
}); | |
} | |
}); | |
# | |
# | |
Q: How to delete a model in the controller | |
A: | |
App.TodoController = Ember.ObjectController.extend | |
todo = @get('model') | |
todo.deleteRecord() | |
todo.get('store').commit() | |
# | |
# | |
Q: How to filter elements on an arrayController | |
A: | |
App.TodosController = Ember.ArrayController.extend | |
clearCompleted: -> | |
completed = @filterProperty('isCompleted', true) | |
completed.invoke('deleteRecord') | |
# calls deleteRecord for every completed todo in completed array | |
@get('store').commit() | |
# | |
# | |
Q: How to call another event from route events | |
A: | |
events: { | |
eventOne: function() { | |
console.log('You got me!'); | |
}, | |
eventTwo: function() { | |
this.events.eventOne(); | |
}, | |
} | |
# | |
# | |
Ember.beginPropertyChanges(); | |
this.get('controllers.application').incrementProperty('prop1'); | |
this.get('controllers.application').incrementProperty('prop2'); | |
Ember.endPropertyChanges(); | |
# | |
# | |
More information | |
http://darthdeus.github.com/ | |
# | |
# | |
ember.js on node.js | |
https://github.com/emberjs/ember.js/pull/771 | |
# | |
# | |
{{#each posts itemController="post"}} | |
{{!-- `this` in here is each post wrapped in an App.PostController --}} | |
{{/each}} | |
# | |
# | |
http://emberjs.com/api/classes/Ember.Enumerable.html | |
# | |
# | |
http://livsey.org/blog/2013/02/20/tick-tock/ | |
# | |
# | |
Q: how to show all routes | |
A: App.Router.router.recognizer.names | |
# | |
# | |
A: how to show all templates - only the names | |
Q: Ember.keys(Ember.TEMPLATES) | |
# | |
# |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment