Using the elements of the DOM

README_01.md

Examples of different html elements of the DOM used directly without addons or complex stuff.

View Twiddle | Copy Twiddle | View Gist

Original idea of this README taken from @rwjblue

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    changed: function(val) {
      console.log(val);
      this.get('target').send('changed', val);
    }
  }
});

application.route.js

import Ember from 'ember';
import log from '../utils/log';

export default Ember.Route.extend({
    model: function() {
    return { choices: ['friend','foe'] };
  },
  
  actions: {
    error: function(error) {
      log(error.message);
    },
    
   changed: function(value) {
     log('currentValue is: ' + value);
   }
 } 
});

application.template.hbs

<h2>Componentless Forms in ember</h2>
<input type="text" value={{nvalue}} oninput={{action (mut nvalue) value="target.value"}}>
<input type="text" value={{nvalue}} onkeyup={{action (mut nvalue) value="target.value"}}>{{nvalue}}
<br><br><br>
{{currentValue}}
 

  <input list="browsers" name="browser" onchange={{action "changed" value="target.value"}}>
        <datalist id="browsers">
            {{#each model.choices key="@identity" as |choice|}}
      <option value={{choice}} selected={{is-equal value choice}}>{{choice}}</option>
    {{/each}}
        </datalist>
 
 <input type="range" 
   value={{currentValue}}
   min=1
   max=10
   oninput={{action "changed" value="target.value"}} >

  <input type="checkbox" 
    value={{currentValue}}
    min=1
    max=10
    onchange={{action "changed" value="target.checked"}} >

  <input type="text" 
    value={{currentValue}}
    min=1
    max=10
    oninput={{action "changed" value="target.value"}} >

  <form action="" onchange={{action "changed" value="target.value"}} >
    <input type="radio" name="sex" value="friend">friend
    <input type="radio" name="sex" value="foe">Foe
  </form>

  <select onchange={{action "changed" value="target.value"}}>
    {{#each model.choices key="@identity" as |choice|}}
      <option value={{choice}} selected={{is-equal value choice}}>{{choice}}</option>
    {{/each}}
  </select>    
  
  <textarea oninput={{action "changed" value="target.value"}}>{{currentValue}}</textarea>

  
  <pre id="logs"></pre>

helpers.is-equal.js

export default Ember.Helper.helper(function(params) {
  const a = params[0];
  const b = params[1];
  return a === b;
});

twiddle.json

{
  "version": "0.4.13",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.13/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember-template-compiler.js"
  }
}

utils.log.js

import Ember from 'ember';

Ember.onerror = function(error) {
  log(error.stack);
};

export default function log(...args) {
  let msg = args.join(' ');
  let logs = document.getElementById('logs');
  
  logs.insertBefore(
    document.createTextNode("\n" + msg),
    logs.firstChild
  );
}