Geek Answers Handbook

What do I need to get started with emberjs?

So, I check Emberjs .

Scroll a little on the main page: "GETTING STARTED WITH EMBER.JS EASY".

Great, it looks simple, I'll give it back.

Create a new HTML5 template file.

Paste the code of your template into mine:

<body></body>

Enable emberjs:

 <script src="ember.js" type="text/javascript"></script>

Include the JS code they provided in:

 <script type="text/javascript"></script>

In my tags. Great, let's see what happens.

Download the page, the console will tell me that it requires jquery. Therefore, there is no problem with jQuery. Try again, another mistake, I need to turn on the steering wheels. No problem, I turn on the steering wheel. Try again, the application is not defined ... correctly ... so I turn on

 window.App = Ember.Application.create();

Above the fragment they provided. Try again, DS not defined. At the moment, I have no idea where to go next. I took a look at the emberjs guide section as I assume that I should define a DS model somewhere or something else. But the leadership was useless.

Am I missing something obviously obvious, or is it really not "easy" as they put it? What do I need to do to make this basic example work (and why the hell did they give the "basic" code that doesn't work in this example)?

Edit:

My full code is:

 <!DOCTYPE html> <html> <head> <script src="jquery.js" type="text/javascript"></script> <script src="handlebars.js" type="text/javascript"></script> <script src="ember.js" type="text/javascript"></script> <script type="text/javascript"> window.App = Ember.Application.create(); App.Person = DS.Model.extend({ firstName: DS.attr('string'), lastName: DS.attr('string'), fullName: function() { return this.get('firstName') + " " + this.get('lastName'); }.property('firstName', 'lastName') }); App.peopleController = Em.ArrayController.create({ content: App.Person.findAll() }); </script> </head> <body> <h1>People</h1> <ul> {{#each peopleController}} <li>Hello, <b>{{fullName}}</b>!</li> {{/each}} </ul> </body> </html>
+4
source share
2 answers

The problem is not that the documentation does not take into account the list of necessary dependencies, the Handlebars naming convention and suddenly starts talking about the Post controller without providing the code. There are also several places where there are a few cognitive references aimed at continuing, so if you know about EmberJs, the manual makes sense, but if you are trying to learn this freshly, you need to jump, make assumptions, and do some tests.

Although this is not the minimum code required for an EmberJS application, it should be enough for you to start connecting about 80% of the getting started guide. Hope this helps.

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <script src="jquery-1.9.1.js"></script> <script src="handlebars.js"></script> <script src="ember-1.0.0-rc.1.js"></script> </head> <body> <script language="javascript" type="text/javascript"> // Make a global variable -- http://emberjs.com/guides/application/ App = Ember.Application.create({ VERSION: '1.0.0', // store: Ember.Store.create().from(Ember.fixtures) }); // http://emberjs.com/api/classes/Ember.Application.html App.ready = function() { // alert("App initialized!"); }; // Application Controller, extended with custom properties App.ApplicationController = Ember.Controller.extend({ appName: 'My First Example', firstName: "Charlie", lastName: "Brown", // initial value isExpanded: false, expand: function() { this.set('isExpanded', true); }, contract: function() { this.set('isExpanded', false); } }); // A router App.ApplicationRoute = Ember.Route.extend({ setupController: function(controller) { // `controller` is the instance of ApplicationController controller.set('title', "Hello world!"); } }); </script> <script type="text/x-handlebars" data-template-name="application"> <header> <h1>A Header - {{appName}}</h1> </header> <div> Hello, {{firstName}} {{lastName}}. <p/> {{#if isExpanded}} <div class='body'>{{body}}</div> <button {{action "contract"}}>Contract</button> {{else}} <button {{action "expand"}}>Show More...</button> {{/if}} <hr/> {{outlet}} <hr/> </div> <footer> <H1>A Footer</H1> </footer> </script> </body> </html>
+2
source

You do not need to define DS storage unless you include Ember data. I have the simplest Ember startup template available on jsfiddle . You can look at the source of the rendered frame to understand that you only need 3 JS files (which you have already included) for the application to work.

From there it is up to you, but yes, I admit that the documentation is not enough to start from scratch.

From your edit, you are referencing a DS object, but you have not specified an Ember Data script. This is currently an addition to the default EmberJS default script due to the fact that it is not blocked by the API, while the main thread is blocked.

0
source

More articles:


All Articles