CODEWITHSUNDEEP
templatesviewember.jshandlebars.js
Peter Clause
Peter Clause

Reputation: 1141

Basic ember.js template concepts

I'm trying to understand the basic concepts of ember.js and how the whole template/view stuff works together (and some best practices), but, I really have problems to find answers to my questions.... So, maybe, one of you can help me...

  1. "Getting started" says: "You can use Ember.View to render a Handlebars template and insert it into the DOM" and it suggests the usage of view.append(). I downloaded to getting started kit and there is a template, a view and it's beeing displayed without a view.append(). Why?

  2. I tried to extend the template with a placeholder {{ message }} added a attribute with the same name to the view, and assigned a value, but its not rendered. Why?

Can someone please bring some light to me... Many thanks in advance. Links and good Stackoverflow threads are very welcome.

Some code examples:

index.html:

<script type="text/x-handlebars" data-template-name="application">
<h1>Hello from Ember.js</h1>
</script>

app.js

App.ApplicationView = Ember.View.extend({
  templateName: 'application',
  message : 'Hallo Du'
});

If I change 'application' to 'application_", it will still be rendered... So, why do I define a template name?

Best regards Peter

Upvotes: 0

Views: 1475

Answers (1)

MilkyWayJoe
MilkyWayJoe

Reputation: 9092

Like I said in the comments, in Ember 1.0pre (and newer releases), to display view attributes/properties you have to do {{view.YourAttributeName}}, so you have to user {{view.message}} in your handlebars template. So here's what you have to do in your js:

App = null;

$(function() {

    App = Em.Application.create();

    App.ApplicationView = Ember.View.extend({
      templateName: 'application',
      message : 'Hallo Du'
    });
})

And here's the html page with the template:

<body>

    <script type="text/x-handlebars">
        <h1>Hello from Ember.js</h1>
         {{view.message}}
    </script>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js" ></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js" ></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js" ></script>
</body>​

Check this very basic fiddle with the code above working: http://jsfiddle.net/schawaska/MwXjG/

Upvotes: 4

Related Questions