heycarsten · August 29, 2015 14:11
diff --git a/example.html b/example.html
 <html>
  <head>
    <title>Learnin'</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet">
    <style>
      body {
        margin: 30px auto;
        width: 600px;
      }

      table {
        width: 100%;
      }

      th, td {
        text-align: left;
        padding: 8px;
        box-sizing: padding-box;
      }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js" type="text/javascript"></script>
    <script src="http://builds.emberjs.com/tags/v1.9.0/ember.js" type="text/javascript"></script>
    <script>
      App = Ember.Application.create();

      App.Router.map(function() {

      });

      DasMixin = Ember.Mixin.create({
        fsmIsLoading: false,

        init: function() {
          if (this.get('isLoading') === undefined) {
            // alias it
            this.reopen({
              isLoading: Em.computed.reads('fsmIsLoading')
            });
          } else {
            // leave it
          }

          this._super();
        }
      });

      App.Model = Ember.Object.extend(DasMixin, {
        isLoading: false
      });

      App.NonModel = Ember.Object.extend(DasMixin);

      App.IndexRoute = Ember.Route.extend({
        setupController: function(controller) {
          controller.set('model', App.Model.create());
          controller.set('nonModel', App.NonModel.create());
        }
      });

      App.IndexController = Ember.Controller.extend({
        actions: {
          toggleModel: function() {
            this.toggleProperty('model.fsmIsLoading');
          },

          toggleNonModel: function() {
            this.toggleProperty('nonModel.fsmIsLoading');
          }
        }
      });
    </script>
  </head>
  <body>
    <script type="text/x-handlebars" data-template-name="application">
      {{outlet}}
    </script>

    <script type="text/x-handlebars" data-template-name="index">
      <h2>App.Model</h2>
      <p>
        <code>App.Model</code> is an example of an object that has an existing
        property which would otherwise conflict with ours. In this case, we
        leave the conflicting propery alone. Users of our library use the
        prefixed <code>fsmIsLoading</code> propery. 
      </p>
      <table>
        <tbody>
          <tr>
            <td><code>fsmIsLoading</code></td>
            <td>{{model.fsmIsLoading}}</td>
            <td><button {{action "toggleModel"}}>Toggle</button></td>
          </tr>
          <tr>
            <td><code>isLoading</code></td>
            <td>{{model.isLoading}}</td>
            <td></td>
          </tr>
        </tbody>
      </table>

      <h2>App.NonModel</h2>
      <p>
        <code>App.NonModel</code> is an example of an object that does not have
        any confilcting properties. In this case we can alias to our prefixed
        property.
      </p>
      <table>
        <tbody>
          <tr>
            <td><code>fsmIsLoading</code></td>
            <td>{{nonModel.fsmIsLoading}}</td>
            <td><button {{action "toggleNonModel"}}>Toggle</button></td>
          </tr>
          <tr>
            <td><code>isLoading</code></td>
            <td>{{nonModel.isLoading}}</td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </script>
  </body>
 </html>
	<html>
	<head>
	<title>Learnin'</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet">
	<style>
	body {
	margin: 30px auto;
	width: 600px;
	}

	table {
	width: 100%;
	}

	th, td {
	text-align: left;
	padding: 8px;
	box-sizing: padding-box;
	}
	</style>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v2.0.0.js" type="text/javascript"></script>
	<script src="http://builds.emberjs.com/tags/v1.9.0/ember.js" type="text/javascript"></script>
	<script>
	App = Ember.Application.create();

	App.Router.map(function() {

	});

	DasMixin = Ember.Mixin.create({
	fsmIsLoading: false,

	init: function() {
	if (this.get('isLoading') === undefined) {
	// alias it
	this.reopen({
	isLoading: Em.computed.reads('fsmIsLoading')
	});
	} else {
	// leave it
	}

	this._super();
	}
	});

	App.Model = Ember.Object.extend(DasMixin, {
	isLoading: false
	});

	App.NonModel = Ember.Object.extend(DasMixin);

	App.IndexRoute = Ember.Route.extend({
	setupController: function(controller) {
	controller.set('model', App.Model.create());
	controller.set('nonModel', App.NonModel.create());
	}
	});

	App.IndexController = Ember.Controller.extend({
	actions: {
	toggleModel: function() {
	this.toggleProperty('model.fsmIsLoading');
	},

	toggleNonModel: function() {
	this.toggleProperty('nonModel.fsmIsLoading');
	}
	}
	});
	</script>
	</head>
	<body>
	<script type="text/x-handlebars" data-template-name="application">
	{{outlet}}
	</script>

	<script type="text/x-handlebars" data-template-name="index">
	<h2>App.Model</h2>
	<p>
	<code>App.Model</code> is an example of an object that has an existing
	property which would otherwise conflict with ours. In this case, we
	leave the conflicting propery alone. Users of our library use the
	prefixed <code>fsmIsLoading</code> propery.
	</p>
	<table>
	<tbody>
	<tr>
	<td><code>fsmIsLoading</code></td>
	<td>{{model.fsmIsLoading}}</td>
	<td><button {{action "toggleModel"}}>Toggle</button></td>
	</tr>
	<tr>
	<td><code>isLoading</code></td>
	<td>{{model.isLoading}}</td>
	<td></td>
	</tr>
	</tbody>
	</table>

	<h2>App.NonModel</h2>
	<p>
	<code>App.NonModel</code> is an example of an object that does not have
	any confilcting properties. In this case we can alias to our prefixed
	property.
	</p>
	<table>
	<tbody>
	<tr>
	<td><code>fsmIsLoading</code></td>
	<td>{{nonModel.fsmIsLoading}}</td>
	<td><button {{action "toggleNonModel"}}>Toggle</button></td>
	</tr>
	<tr>
	<td><code>isLoading</code></td>
	<td>{{nonModel.isLoading}}</td>
	<td></td>
	</tr>
	</tbody>
	</table>
	</script>
	</body>
	</html>