Veteran Ember NYCer Matthew Beale (@mixonic) will talk about the new APIs arriving soon in Ember. He'll cover how he and the rest of the team have implemented block params and bound attributes, and look at how top-level components, attrs, and opt-in two-way binding may look.
10. Context switching deprecated in 1.9
1 {{! this context is the controller }}
2 {{#each model}}
3 {{name}} {{! this context is each person }}
4 {{/each}}
1 {{! this context is the controller }}
2 {{#each person in model}}
3 {{person.name}} {{! this context is still the controller }}
4 {{/each}}
http://emberjs.com/blog/2014/12/08/ember-1-9-0-released.html
16. 1 {{! this context is the controller }}
2 {{#each person in model}}
3 {{person.name}} {{! this context is still the controller }}
4 {{/each}}
Block params introduced in 1.10
http://emberjs.com/blog/2014/12/08/ember-1-9-0-released.html
1 {{! this context is the controller }}
2 {{#each model as |person|}}
3 {{person.name}} {{! this context is still the controller }}
4 {{/each}}
28. Controllers deprecated when 2.0 comes out
“Many people have noticed that
controllers in Ember look a lot like
components, but with an arbitrary division
of responsibilities. We agree!”
- Tomkatz, 2.0 RFC
https://github.com/emberjs/rfcs/pull/15
34. Here are some ideas
Not finished, polished, or maybe even ever going to happen.
35. On Ember components that use the new tag
syntax, data-binding will be one-way. The mut
helper will wrap values that the receiver can
modify.
<x-input value={{mut name}}></x-input>
1 export default Ember.Component.extend({!
2 tagName: 'input',!
3 change: function(){!
4 this.attrs.name.set(this.$().val());!
5 }!
6 });!
36. bind-action, or maybe action, will wrap the
action it references in a closure, and pass it as
a function. You can call it directly.
{{x-input model=model submit=(bind-action "save")}}
1 export default Ember.Component.extend({
2 change: function(){
3 this.attrs.submit(model);
4 }
5 });
37. ref would allow you to point an action at a
specific component in your current template.
1 {{video-player ref="vp"}}
2
3 <button on-click={{ref 'vp' 'play'}}>
38. set would allow you to easily map an
event to a value setter.
<x-input on-change={{set model.name}}></x-input>
39. scoped helpers allow a component to yield
references to components or helpers.
1 // app/components/form-for.js
2
3 import Ember from "ember";
4 import FormForInput from "./helpers/input";
5
6 var makeViewHelper = Ember.HTMLBars.makeViewHelper;
7
8 export default Ember.Component.extend({
9 formHelpers: {
10 input: makeViewHelper(FormForInput)
11 }
12 });
1 {{! app/templates/components/form-for.hbs }}
2
3 {{yield formHelpers}}
1 {{! app/templates/post/new.hbs }}
2
3 {{#form-for as |f|}}
4 {{f.input label="Title" value=model.title}}
5 {{/form-for}}