Building an App with Ember.js
Why Stack Overflow recommends it
Stack Overflow users cite it as the tutorial they were following when they hit routing, Ember Data and template errors, and as a reference for explaining dynamic segments.
Recommended by 1 people across 1 different months, 2013 to 2014.
What it is
A 2013 screencast by Ember.js co-creator Tom Dale that builds a blog reader app from scratch with Ember.js. It covers routing, templates, Ember Data models, fixtures and a Markdown preview, and was featured on the official Ember site at the time.
What people said
Recommends RyanHirsch · 2013-04 · Stack Overflow · on “has no method 'readOnly' and has no method 'attr'”
I am trying to follow along with Tom Dale's youtube video [this video] for building a simple blog. I have cloned the ember-data master from GH and built it, however I am getting two errors: Uncaught TypeError: Object [object Object] has no method 'readOnly' thats from inside ember-data and Uncaught TypeError: Object [object Object] has no method 'attr' is from my first use of DS.attr in my model. My code can be found on GitHub [LINK] as well as below /* Ember and Ember-Data are shimmed in as deps */ define([], function () { 'use strict'; var App = Ember.Application.create(); App.Store = DS.Store.extend({ revision: 12, adapter: 'DS.FixtureAdapter' }); App.Router.map(function () { this.resource('ab
Cites MilkyWayJoe · 2013-03 · Stack Overflow · on “"Dynamic segment" in Ember.js?”
Updating with a proper sample: Demo [LINK] | Source [LINK] Edit due to questions in comments: In Ember, think of the Router mechanism as a State Machine: Each Route can be seen as a State. Sometimes tho, a state can have it's own little state machine within it. With that said: A resource is a state which you have possible child states. A PersonRoute can be defined as either as a resource our a route in the <Application>.Router.map callback; it really depends on your end goal. For example, if we think of a resource for a list of people based on a person model, we would potentially have a route to list all records. App.Router.map(function() { this.resource('people'); }); With this map, I'm tel
Cites Abdull · 2013-03 · Stack Overflow · on “"Dynamic segment" in Ember.js?”
We are getting closer to an accepted answer :)... With respect to the screencast from 11:06 until 11:58 [this video] : For the "nested route", your provided code uses `this.route(...)`, while the screencast uses `this.resource(...)`. Is there any difference between `this.route(...)` and `this.resource(...)`?
Cites ken · 2013-04 · Stack Overflow · on “No 'addArrayObserver' or 'removeArrayObserver'”
I am modelling an administrative interface that helps manage database tables. There are two models: [DbxTables, DbxColumns]. I want to allow the user to choose a table using Boostrap's tab-menu and then be able to see the columns in that table. This mostly works. For instance, if I type [LINK] where performance is the name of the table I get the following: If I decide to go to another table by manipulating the URL -- for instance [LINK] -- then it will successfully switch to the food columns in the right-hand pane. The problems come in when I use my {{linkTo}} links in the left-hand tab menu. One of two things happens: If the {{linkTo}} looks like {{linkTo 'columns' this}} then it makes the
Cites mko · 2013-04 · Stack Overflow · on “Ember default template doesn't show up”
I'm new to emberjs it's really cool, I've follow this guide [this video] in the official website , After I add some Posts model fixture, the default application template refuses to show up, I can't figure out where's the problem. Here's my code [LINK]
Cites Theos Morpork · 2013-04 · Stack Overflow · on “EmberJS "Building an App with Ember.js" error routing”
I use EmberJS 1.0.0 RC3. Those files are based on this tutorial: [this video] ! (from emberjs.com/guides/). My index.html is: <!doctype html> <!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]--> <head> <meta charset="UTF-8"> <title>Test</title> <meta name="description" content=""> <meta name="author" content=""> <link rel="stylesheet" href="app/Ressources/public/css/normalize-2.1.1.min.css"> <link rel="stylesheet" href="app/Ressources/public/css/bootstra
Cites Ritin · 2013-04 · Stack Overflow · on “ember or showdown : Uncaught TypeError: Cannot call method 'replace' of undefined”
Tom Dayle's Lecture: Intro to Ember [this video] i used both github.com/cmoel/tom_dale_ember_screencast github.com/cmoel/tom_dale_ember_screencast And github.com/jielimanyili/tom-dale-screencast_building-an-app-with-ember-js_code In Chrome Dev: Uncaught TypeError: Cannot call method 'replace' of undefined (showdown.js:62) If i remove the use of "markdown" from the template.. the App works. In FireBug: a is undefined (showdown.js: 62) Not sure if it is Ember or Showdown that is causing this. Thanks
Cites mko · 2013-04 · Stack Overflow · on “Ember console doesn't work”
I'm following the guide [this video] in the official website. And it shows me do some model changes in browser console like: App.Post.find(1) But in my computer it shows Any idea? here's my git repo [LINK] for this test code
Cites NealR · 2013-07 · Stack Overflow · on “Uncaught More context objects were passed than there are dynamic segments for the route: post”
I'm trying to follow this basic Ember.js tutorial [this video] but having no luck with the "posts" model. I have everything set up according to the demonstration, however I am getting the error: Uncaught More context objects were passed than there are dynamic segments for the route: post Since this is the first time I've ever worked with an Ember.js app, I honestly have no clue what this means. Any help (literally anything) would be greatly appreciated. Here is my App.js App = Ember.Application.create(); App.Store = DS.Store.extend({ adapter: 'DS.FixtureAdapter' }); App.Router.map(function () { this.resource('posts', function() { this.resource('post', { path:'post_id'}) }); this.resource('about')
Cites None None · 2013-08 · Stack Overflow · on “Emberjs - real time changes not working?”
I've followed the tutorial of one of the creators of Emberjs: [this video] The goal of tutorial is to present basics of emberjs on an example, where there's a list of posts and if you edit one, the content gets mapped to the corresponding textarea or textfield. Then, the changes are visible in real time. This, however, doesn't work. And I've been following the official tutorial (obviously, emberjs has changed a lot since this yt video). Anyways, what am I missing? Here's my code (HTML): <script type="text/x-handlebars"> <div class="navbar"> <div class="navbar-inner"> <a class="brand" href="#">Bloggr</a> <ul class="nav"> <li>{{#linkTo 'posts'}}Posts{{/linkTo}}</li> <li>{{#linkTo 'about'}}About{{/l