New Twiddle

controllers.application.js

import Ember from 'ember';
import { computed } from '@ember/object';

const nsfw = ['nudity', 'violence', 'vulgarity', 'drug use', 'socialism', 'dangerous ideas'];

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  nsfwTags: computed('post.tags.nsfw.[]', function() {
    return this.post.get('tags.nsfw');
  }),
  init() {
    this._super(...arguments);
    let tag = this.store.createRecord('tag', {name: nsfw[Math.floor(Math.random() * nsfw.length)]});
    this.post = this.store.createRecord('post', {title: 'hihihi', 'tags.nsfw': [tag]});
  },
  actions: {
    addATag() {
      let tag = this.store.createRecord('tag', {name: nsfw[Math.floor(Math.random() * nsfw.length)]});
	    this.post.get('tags.nsfw').pushObject(tag);
    },
  },
});

models.post.js

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

export default Model.extend({
  title: attr('sting'),
  body: attr('string'),
  tags: hasMany('tag'),
  'tags.nsfw': hasMany('tag', {inverse: null}),
});

models.tag.js

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

export default Model.extend({
  name: attr('string'),
  posts: hasMany('post'),
});

templates.application.hbs

<h1>Dots in association names</h1>
<br>
<p>We may be crazy, but we're considering adding associations with dots in them.</p>
<br>
{{post.title}}
<br>
Tags (via computed property):
<b>
{{#each nsfwTags as |tag|}}
  {{tag.name}},
{{/each}}
</b>
<br>
Tags (<code>#each post.tags.nsfw</code>):
<b>
{{#each post.tags.nsfw as |tag|}}
  {{tag.name}},
{{/each}}
</b>
<br>
Tags (<code>#each (get post 'tags.nsfw')</code>):
<b>
{{#each (get post 'tags.nsfw') as |tag|}}
  {{tag.name}},
{{/each}}
</b>
<br>

<button onclick={{action 'addATag'}}>Add a tag</button>

<p>Conclusion: you can't access associations with dots in the property names directly in hbs, but otherwise they seem to work OK...?</p>

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}