Demonstration of new record not having computed properties

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

helpers.blank.js

import Ember from 'ember';
const { isPresent } = Ember;

const blank = Ember.String.htmlSafe('<small>Blank</small>');

export function isBlank(params/*, hash*/) {
  const thing = params[0];
  
  return isPresent(thing) ? thing : blank;
}

export default Ember.Helper.helper(isBlank);

helpers.or.js

import Ember from 'ember';

export function or(params/*, hash*/) {
  return params[0] || params[1];
}

export default Ember.Helper.helper(or);

models.my-model.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  otherModels: hasMany('other-model')
});

models.other-model.js

import Model from "ember-data/model";
import attr from "ember-data/attr";
import { belongsTo, hasMany } from "ember-data/relationships";

export default Model.extend({
  firstName: attr('string'),
  email: attr('email'),
  
  displayName: Ember.computed('firstName', 'email', function() {
    const first = this.get('firstName');
    const email = this.get('email');
    
    return first || email;
  }),
  
  myModel: belongsTo('my-model')
});

routes.application.js

import Ember from 'ember';
import RSVP from 'rsvp';
export default Ember.Route.extend({
  model() {
    const store = this.get('store');
    const model = store.createRecord('my-model');
    const newOther = store.createRecord('other-model', { myModel: model }); 
    
    model.get('otherModels').pushObject(newOther);
     
    return RSVP.hash({ myModel: model, newOther: newOther });
  }
});
 

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}
code {
 background: #efefef;
  padding: 5px;
}

small {
  background: red; 
  color: white;
  padding: 5px;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
Frist Name <br />
{{input value=model.newOther.firstName}}
<br />
Email <br />
{{input value=model.newOther.email}}

<h4>Accessed directly</h4>
isNew: {{model.newOther.isNew}} <br />
Display Name: {{blank model.newOther.displayName}} <code>firstName || email</code><br />
First Name: {{blank model.newOther.firstName}} <br />
Email: {{blank model.newOther.email}} 

<br>
<br>
<h4>Accessed via relationship</h4>
{{#each model.myModel.otherModels as |other|}}
<hr />
isNew: {{other.isNew}} <br />
{{log other}}
Display Name: {{blank other.displayName}} <code>firstName || email</code><br />
First Name: {{blank other.firstName}} <br />
Email: {{blank other.email}} 
{{/each}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1"
  }
}