New Twiddle

01_README.md

Demo using dynamic attributeBindings to enable auto-attribute bindings without having to know all possible combinations.

Note this is using a simplified version of {{one-way-input}} (part of the ember-one-way-controls addon).

application.route.js

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

export default Ember.Route.extend({
  model() {
    
  },
  actions: {
    error: function(error) {
      log(error.message);
    }
  }  
});

application.template.hbs

<h1>rwjblue's Ember Twiddle</h1>



<div>
  <p>Input with maxlength: {{current-value-with-maxlength}}</p>
  
{{x-input 
	value=current-value-with-maxlength 
  maxlength="4"
  update=(action (mut current-value-with-maxlength))
}}
</div>

<div>
  <p>Input with placeholder: {{current-value-with-placeholder}}</p>
  
{{x-input 
	value=current-value-with-placeholder 
  placeholder='this has placeholder'
  update=(action (mut current-value-with-placeholder))
}}
</div>

{{outlet}}

components.x-input.js

import Ember from 'ember';

let nonattributeBoundProps = [
  'update'
];

export default Ember.Component.extend({
  tagName: 'input',
  
  init() {
    this._super(...arguments);
    
    for (let key in this.attrs) {
      if (nonattributeBoundProps.indexOf(key) === -1) {
        this.attributeBindings.push(key);  
      }
    }
  },
  
  input() { this._handleChangeEvent(); },
  change() { this._handleChangeEvent(); },
  
  _handleChangeEvent() {
    let value = this.readDOMAttr('value');
    this._processNewValue.call(this, value);
  },
  
  _processNewValue(value) {
    if (this._value !== value) {
      this._value = value;
      this.attrs.update(value);
    }
  },
  
  didReceiveAttrs: function() {
    if (!this.attrs.update) {
      throw new Error(`You must provide an \`update\` action to \`{{${this.templateName}}}\`.`);
    }

    this._processNewValue.call(this, this.get('value'));
  }
});

twiddle.json

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

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');
  
  if (!logs) {
  	logs = document.createElement('pre');
    document.body.appendChild(logs);
  }
  
  logs.insertBefore(
    document.createTextNode("\n" + msg),
    logs.firstChild
  );
}