Skip to content

Instantly share code, notes, and snippets.

@elwayman02
Last active February 28, 2019 23:00
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 elwayman02/cbceb539d4f19ed12e5ffa9da86b5b72 to your computer and use it in GitHub Desktop.
Save elwayman02/cbceb539d4f19ed12e5ffa9da86b5b72 to your computer and use it in GitHub Desktop.
New Twiddle
import Ember from 'ember';
import layout from 'app/templates/components/list-controls';
export default Ember.Component.extend({
layout,
move: null,
actions: {
itemMoved() {
this.move();
}
}
});
import ControlsComponent from 'app/components/list-controls';
import layout from 'app/templates/components/list-view';
export default ControlsComponent.extend({
layout
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
list: ['1','2','3'],
actions: {
move() {
alert('moved');
}
}
});
<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<p>What I want:</p>
{{#list-view list=list move=(action 'move') as |listItem|}}
{{#custom/my-row item=listItem.item}}
{{listItem.controls}}
{{/custom/my-row}}
{{/list-view}}
<p>What I Have:</p>
{{list-controls
listComponent=(component 'custom/my-list-view')
list=list
move=(action 'move')
}}
<br>
<br>
<button {{action buttonClick}}>Move {{item}}</button>
{{#each list as |listItem|}}
{{#custom/my-row item=listItem}}
{{yield listItem}}
{{/custom/my-row}}
{{/each}}
This is item {{item}}
{{yield}}
{{#component listComponent list=list as |listItem|}}
{{control-button item=listItem buttonClick=(action 'itemMoved')}}
{{/component}}
{{#each list as |listItem|}}
{{yield (hash
item=listItem
controls=(component 'control-button' item=listItem buttonClick=(action 'itemMoved'))
)}}
{{/each}}
{
"version": "0.15.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.4.3",
"ember-template-compiler": "3.4.3",
"ember-testing": "3.4.3"
},
"addons": {
"ember-data": "3.4.2"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment