Skip to content

Instantly share code, notes, and snippets.

@raila
Last active November 16, 2016 20:05
Show Gist options
  • Save raila/4587521 to your computer and use it in GitHub Desktop.
Save raila/4587521 to your computer and use it in GitHub Desktop.
# 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