Skip to content

Instantly share code, notes, and snippets.

@rwjblue
Forked from SaladFork/components.my-component.js
Created November 30, 2016 22:37
Show Gist options
  • Select an option

  • Save rwjblue/a64ad0093296b87e034d8da3279ca8f5 to your computer and use it in GitHub Desktop.

Select an option

Save rwjblue/a64ad0093296b87e034d8da3279ca8f5 to your computer and use it in GitHub Desktop.

Revisions

  1. rwjblue revised this gist Nov 30, 2016. 1 changed file with 1 addition and 3 deletions.
    4 changes: 1 addition & 3 deletions components.my-component.js
    Original file line number Diff line number Diff line change
    @@ -11,9 +11,7 @@ export default Ember.Component.extend({

    actions: {
    addData(key) {
    this.get('data')[key] = 'foo';
    this.set('newData', '');
    this.rerender();
    this.set(`data.${key}`, 'foo');
    }
    }
    });
  2. @SaladFork SaladFork revised this gist Nov 30, 2016. 2 changed files with 4 additions and 9 deletions.
    4 changes: 2 additions & 2 deletions components.my-component.js
    Original file line number Diff line number Diff line change
    @@ -5,13 +5,13 @@ export default Ember.Component.extend({
    this._super(...arguments);

    this.data = {
    colors: ['blue','red']
    version: Ember.VERSION
    };
    },

    actions: {
    addData(key) {
    this.get('data')[key] = [1,2,3];
    this.get('data')[key] = 'foo';
    this.set('newData', '');
    this.rerender();
    }
    9 changes: 2 additions & 7 deletions templates.components.my-component.hbs
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,9 @@
    {{yield}}
    <h3>Data</h3>
    <ul>
    {{#each-in data as |type values|}}
    {{#each-in data as |key value|}}
    <li>
    {{type}}
    <ul>
    {{#each values as |value|}}
    <li>{{value}}</li>
    {{/each}}
    </ul>
    {{key}}: {{value}}
    </li>
    {{/each-in}}
    </ul>
  3. @SaladFork SaladFork created this gist Nov 30, 2016.
    19 changes: 19 additions & 0 deletions components.my-component.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    import Ember from 'ember';

    export default Ember.Component.extend({
    init() {
    this._super(...arguments);

    this.data = {
    colors: ['blue','red']
    };
    },

    actions: {
    addData(key) {
    this.get('data')[key] = [1,2,3];
    this.set('newData', '');
    this.rerender();
    }
    }
    });
    4 changes: 4 additions & 0 deletions controllers.application.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    import Ember from 'ember';

    export default Ember.Controller.extend({
    });
    1 change: 1 addition & 0 deletions templates.application.hbs
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {{my-component}}
    20 changes: 20 additions & 0 deletions templates.components.my-component.hbs
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,20 @@
    {{yield}}
    <h3>Data</h3>
    <ul>
    {{#each-in data as |type values|}}
    <li>
    {{type}}
    <ul>
    {{#each values as |value|}}
    <li>{{value}}</li>
    {{/each}}
    </ul>
    </li>
    {{/each-in}}
    </ul>
    <hr>
    <h4>Add Data</h4>
    {{input value=newData}}
    <button onclick={{action 'addData' newData}}>
    Add
    </button>
    18 changes: 18 additions & 0 deletions twiddle.json
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    {
    "version": "0.10.6",
    "EmberENV": {
    "FEATURES": {}
    },
    "options": {
    "use_pods": false,
    "enable-testing": false
    },
    "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.10.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.10.0",
    "ember-testing": "2.10.0"
    },
    "addons": {}
    }