New Twiddle

README_01.md

Bootstrap input customized.

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({
});

application.template.hbs

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
{{bs-input value='content' readOnly=true width=100 display='inline'}}
{{bs-input value=upValue readOnly=false width=60 display='inline'}}
{{bs-input value='%' readOnly=true width=40 display='inline'}}
{{upValue}}

bs-input.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: [
    "form-control",
    //'input-group',
    //'input-group-checkbox'
  ],
  attributeBindings: [
    'readOnly',
    'size',
    'style',
    'type',
    'value'
  ],
  style: Ember.computed('width',function(){
    return (
    'border-radius:0%;'+
    'width:' + this.get('width')+'px;'+
    'display:' + this.get('display')+';'  
    ).htmlSafe();
  }),
  tagName:'input',
  type: 'text',
  readOnly:false,
  value:'text',
  width:20,
  display:'auto',
  input(e){
    //this.set('width',((e.target.value.length + 1) * 7) +20 || 4);
    this.set('value',e.target.value);
  }
  //classNameBindings: ['isReadOnly'],
  
});

twiddle.json

{
  "version": "0.4.16",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.1.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.1.0/ember-template-compiler.js"
  }
}