Ember 2, ember-cli, render partial to only show categories title, but it doesn't work

Question

I have normal, basic ember-cli project.

This is my application.hbs:

<div class="container-fluid">

    <div class="row">

    <div class="col-sm-3 col-md-2 sidebar">
      {{render 'sidebar'}}
    </div>

    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

        {{outlet}}

      </div>

    </div>

</div>

This is my post.hbs:

{{#each model as |post|}}
    {{post.text}}
{{/each}}

This is my sidebar.hbs:

<ul class="nav nav-sidebar">
  {{#each model.posts as |post|}}
    <li>{{#link-to author}}{{post.author.name}}{{/link-to}}</li>
  {{/each}}
</ul>

and everything else is standard.

How to make work {{render 'sidebar'}} with just the title of my categories?

Now it shows nothing.

score 0 · Answer 1 · answered Sep 28 '15 at 15:06

0

I'm not sure why the render helper was not deprecated in Ember 1.13 and removed in 2.0, but you really shouldn't use it any more. The render helper uses a view and a controller that is not at the top level. Views have been removed in 2.0, and controllers not at the top level are deprecated.

Make your sidebar a component.

// application.hbs

<div class="container-fluid">

    <div class="row">

    <div class="col-sm-3 col-md-2 sidebar">
      {{side-bar model=model}}
    </div>

    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

        {{outlet}}

      </div>

    </div>

</div>

// templates/components/side-bar.hbs

<ul class="nav nav-sidebar">
  {{#each model.posts as |post|}}
    <li>{{#link-to author}}{{post.author.name}}{{/link-to}}</li>
  {{/each}}
</ul>

answered Sep 28 '15 at 15:06

Gaurav

12,662
2
36
34

Wondering here which is less resourceful partials or components? We've been using "partial x" if we're only in need for a template without any logical assignment from components.js file – kristjan reinhold Sep 28 '15 at 15:09
How to pass the `model` from the application.hbs? I need an `index.js` route? How to do? Because now I have no model in side-bar component. – Sep 28 '15 at 23:33
@kristjan reinhold, any help? – Sep 29 '15 at 11:12
@JohnSam Okay i can try. First of all is your sidebar dynamic ? – kristjan reinhold Sep 29 '15 at 11:14
@kristjanreinhold, yes it is. I need names of post's categories and name of the user and some other datas... I don't understand how to pass from application.hbs the models I need in the sidebar component. – Sep 29 '15 at 11:16
@JohnSam I added my answer. – kristjan reinhold Sep 29 '15 at 11:18
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/90880/discussion-between-kristjan-reinhold-and-john-sam). – kristjan reinhold Sep 29 '15 at 11:20
@Gaurav, can you help me? – Sep 29 '15 at 16:21

kristjan reinhold · Accepted Answer · 2015-09-30T10:30:53.003

0

Updated the answer above me.

// application.hbs

<div class="container-fluid">

    <div class="row">

    <div class="col-sm-3 col-md-2 sidebar">
      {{side-bar}}
    </div>

    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

        {{outlet}}

      </div>

    </div>

</div>

// templates/components/side-bar.hbs

<ul class="nav nav-sidebar">
  {{#each posts as |post|}}
    <li>{{#link-to author}}{{post.author.name}}{{/link-to}}</li>
  {{/each}}
</ul>



// components/side-bar.js

// This triggers once the component is called out {{side-bar}}. 
init: function() {
   // You're extending ember component class here
   // This class has its own init function if u dont call 
  // _super() it means that the component has not yet been 
  // Initialised and component's not working.
   this._super();
 // Use your queries or what ever u need here
 // e.g query('posts', { user: 1 })
  this.set('posts', this.get('store').find(x));
}

edited Sep 30 '15 at 10:30

answered Sep 29 '15 at 11:18

kristjan reinhold

2,038
1
17
34

It doesn't work. My code of **components/side-bar.js** is: `import Ember from 'ember'; export default Ember.Component.extend({ tagName: 'sidebar', init: function() { this._super(); // e.g query('posts', { user: 1 }) this.set('posts', this.get('store').find(1)); } }); ` and error says: `Uncaught TypeError: Cannot read property 'find' of undefined` – Sep 29 '15 at 14:40
@JohnSam Store is undefined ? try making {{side-bar store=store}} in template – kristjan reinhold Sep 29 '15 at 18:35
Now it works. Can you explain me the code? Especially: `this._super()`? – Sep 30 '15 at 06:52
@JohnSam okay added some. You can accept as answer if it worked out for you =) – kristjan reinhold Sep 30 '15 at 10:31
i'm still trying... if it'll work I'll accept. In while... can you help me here? For you is trivial i think: http://stackoverflow.com/questions/32866410/ember-2-model-save-from-component-my-modal-hbs – Sep 30 '15 at 12:44
This question: http://stackoverflow.com/questions/32870407/ember-2-model-save-from-component-my-modal-hbs – Sep 30 '15 at 16:06

Ember 2, ember-cli, render partial to only show categories title, but it doesn't work

2 Answers2