One-Way Props Example

app.mixins.one-way-props.js

import Ember from 'ember';

const {
	Mixin,
	on,
	defineProperty,
	computed
} = Ember;

const {
	keys
} = Object;

export default Mixin.create({

	oneWayPropRegExp: /^(.*)OneWay$/,

	initOneWayProps: on('init', function() {

		let oneWayRegexp = this.get('oneWayPropRegExp');
		keys(this.attrs).forEach((propName) => {
			let matches = oneWayRegexp.exec(propName),
				oneWayPropName = matches && matches[1];
			if (oneWayPropName) {
				defineProperty(this, oneWayPropName, computed(propName, function(key, value) {
					let retValue;
					if (arguments.length > 1) {
						retValue = value;
					} else {
						retValue = this.get(propName);
					}
					return retValue;
				}));
			}
		});

	})
});

components.some-example.js

import Ember from 'ember';
import OnwWayPropsMixin from '../mixins/one-way-props';
const {
  Component
} = Ember;

export default Component.extend(OnwWayPropsMixin, {
	classNames: ['some-example'],
	aProp: null,
	actions: {
    commit: function(){
      this.sendAction('action', this.get('aProp'));
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'One Way Props Example',
  actions: {
    actOnCommit: function(valueToCommit){
      this.set('someValue', valueToCommit);
    }
  }
});

styles.app.css

html, body {
  margin: 20px;
}

* {
  box-sizing: border-box;
}

input {
  width: 100%
}

div {
  padding: 20px;
  border: 1px solid #0000aa;
}

.arrows {
  text-align: justify;
  font-size: 20px;
  position: relative;
  height: 20px;
}

.arrows > span {
  position: absolute;
  bottom: 0px;
}

.down {
  left: 0;
}

.not-up {
  transform: rotate(-90deg);
  left: 20%;
  font-size: 37px;
  top: 20px;
}

.up {
  right: 20%;
  font-size: 40px;
  top: -5px;
}

.some-example > *{
  width: 48%;
  display: inline-block
}

templates.application.hbs

<h2>{{appName}}</h2>

{{input value=someValue}}
<section class='arrows'>
  <span class='down'>↓</span>
  <span class='not-up'>↛</span>
  <span class='up'>↑</span>
</section>
{{some-example aPropOneWay=someValue action='actOnCommit'}}

templates.components.some-example.hbs

{{input value=aProp}}
<button {{action 'commit'}}>Commit</button>
{{yield}}

twiddle.json

{
  "version": "0.4.6",
  "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.5/ember.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.5/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.5/ember-template-compiler.js"
  }
}