How to represent arrays within ember-data models?

Well… It was a little bit difficult but mixing all answers in this post I made it work. Firstly, you should create a transform for the new type “array”: DS.ArrayTransform = DS.Transform.extend({ deserialize: function(serialized) { return (Ember.typeOf(serialized) == “array”) ? serialized : []; }, serialize: function(deserialized) { var type = Ember.typeOf(deserialized); if (type == ‘array’) … Read more

Ember – Understanding Inverse Relationships

First of all, this post might explain things a bit. It’s not your exact question, but the reasons for the answer are similar. But, to get a clear understanding of what inverses are, you should be familiar with directed graphs. While not immediately apparent, directed graphs are what fuel the idea behind belongsTo and hasMany. … Read more

How to mock an Ember-CLI service in an acceptance test?

Short version of the solution: your registered mock service must have a different service:name than the “real” service you’re trying to mock. Acceptance test: import Ember from ’ember’; import { module, test } from ‘qunit’; import startApp from ‘container-doubling/tests/helpers/start-app’; var application; let speakerMock = Ember.Service.extend({ speak: function() { console.log(“Acceptance Mock!”); } }); module(‘Acceptance | acceptance … Read more

EmberJS – sharing a controller / template for different routes

You were correct throughout. And you can use the new controller and template in edit route also. You have to do only two things. First give the template name as new in the renderTemplate hook of edit route. App.LocationsEditRoute = Ember.Route.extend({ setupController: function(controller, model) { this.controllerFor(‘locations.new’).setProperties({isNew:false,content:model}); }, renderTemplate: function() { this.render(‘locations/new’) } }); As the … Read more

Combine linkTo and action helpers in Ember.js

Ember Link Action addon This is OK for SEO solution! Install addon ember install ember-link-action Usage You can pass closure action as invokeAction param to {{link-to}} component: {{#link-to ‘other-route’ invokeAction=(action ‘testAction’)}} Link to another route {{/link-to}} To pass parameters to action you can use: {{#link-to ‘other-route’ invokeAction=(action ‘testAction’ param1 param2)}} Link to another route {{/link-to}} … Read more

{{content-for ‘head’}} Ember-cli

It was recently added to ember-cli based on this discussion. Here is the relevant code from the commit: EmberApp.prototype.contentFor = function(config, match, type) { var content = []; if (type === ‘head’) { content.push(calculateBaseTag(config)); content.push(‘<meta name=”‘ + config.modulePrefix + ‘/config/environment” ‘ + ‘content=”‘ + escape(JSON.stringify(config)) + ‘”>’); } content = this.project.addons.reduce(function(content, addon) { if (addon.contentFor) … Read more

Select view template by model type/object value using Ember.js

You can make templateName a property and then work out what template to use based on the content. For example, this uses instanceof to set a template based on the type of object: App.ItemView = Ember.View.extend({ templateName: function() { if (this.get(“content”) instanceof App.Foo) { return “foo-item”; } else { return “bar-item”; } }.property().cacheable() }); Here’s … Read more

Handling user authentication when using ember.js

Update 2 Check out this new github example app that uses a hybrid rails view + devise-variable-scoped ember app that runs on ember 1.0.rc.1 + ember-data rev 11 and persists has_many relationships. Check out this token authentication project that isn’t quite ready but shows a lot of promise. This could be great for mobile client … Read more

Ember: Get route instance from the controller

From within a controller, you can access the router via this.get(‘target’). So this.get(‘target’).send(‘goToNextStep’) should work. Like so: App.Flow = Em.ObjectController.extend({ submit: function(){ // … this.get(‘target’).send(‘gotoNextStep’); } } App.FlowRoute = Ember.Route.extend({ events: { gotoNextStep: function(){ // … this.transitionTo(routeName); } } }

How to use third party npm packages with ember cli app

The easiest and recommended answer is to use ember-browserify. (as support for bower packages will be removed in the future.) This is an example for using the npm package dexie within an Ember CLI app. Install browserify: npm install ember-browserify –save-dev Install dexie (or whatever module you need): npm install dexie –save-dev Import the module … Read more