CODEWITHSUNDEEP
templatesember.jsrender
Sea guy
Sea guy

Reputation: 178

Binding model to template with emberjs

I am going to bind model to template with emberjs

<script type="text/x-handlebars" id="dashboard">
    <div>
        <span>this is user list</span>
        <div>
            {{render userinfo userinfo}}
        </div>
    </div>
</script>

<script type="text/x-handlebars" id="_userinfo">
   {{#each model}}
   <span>{{user}}
   {{/each}}
</script>

App.Userinfo= DS.Model.extend({
    user: DS.attr("string")
});

App.Userinfo.FIXTURES = [
    {user:"user1"},
    {user:"user2"},
    {user:"user3"}
];

App.UserinfoView= Ember.View.extend({
});

App.UserinfoController = Ember.ObjectController.extend({   
});


App.Router.map(function() {
    this.resource('dashboard', {path: '/dashboard'}, function() {
    });
});

App.DashboardRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render('dashboard', {      // the template to render
          controller: 'dashboard'       // the controller to use for the template
        }); 
    }
});

App.DashboardController = Ember.ObjectController.extend({ 
});

When i go to /#/dashboard, Dashboard template is loaded.
In here, I have rendered userinfo. I'd like to bind Userinfo Model to usersinfo template so that I display all users. Help me, please.

Upvotes: 1

Views: 829

Answers (1)

intuitivepixel
intuitivepixel

Reputation: 23322

The short: here a working jsbin.

The long: You hade slightly to much unnecessary going on in your code, basically this does the job:

First of all you had no redirect to your dashboard route, since it's your only route (at least as far I can see from your code) we redirect directly to it after entering the index route

App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('dashboard');
  }
});

I've removed the DashboardController since there is nothing to be done. Then your DashboardRoute was missing the model hook to provide actually data for your dashboard template

App.DashboardRoute = Ember.Route.extend({
  model: function(){
    return App.Userinfo.find();
  }
});

In the router map you don't need to define a path if the URL is the same name as your template name in your case it is the same dashboard

App.Router.map(function() {
  this.resource('dashboard');
});

The userinfo model was correct

App.Userinfo= DS.Model.extend({
  user: DS.attr("string")
});

But your fixtures where missing the id

App.Userinfo.FIXTURES = [
  {id:1, user:"user1"},
  {id:2, user:"user2"},
  {id:3, user:"user3"}
];

Moreover you where using the render helper with a partial template _userinfo the correct way to render a partial is this

{{partial userinfo}}

As you can see we don't pass any additional parameters to it because the data will be made available trough your model hook. The partial helper uses the context and the data provided in the template it is rendered into, in your case the dashboard template, therefore the model hook is necessary.

Hope it helps.

Upvotes: 3

Related Questions