CODEWITHSUNDEEP
ember.jsember-cliember-cli-pods
ShopApps.co.uk
ShopApps.co.uk

Reputation: 103

how to render two pods content on the same page?

I'm new to ember/ember-cli and am slowly getting my head around the immense learning curve... I have come across an issue I was hoping someone could advise me on...

I have an App that displays a contact and then places tabbed content underneath the contact details, one tab contains some notes info the other some site locations info.

I essentially have a Bootstrap "Tabbed" section to my page. With (currently) two Tabs labelled "Sites" and "Notes". The idea being if you click Notes, you see content from the Notes pod and if you click Sites you see content from the Sites Pod.

To do this i am naming my outlets e.g.

{{outlet 'sites-tab'}}

and

{{outlet 'notes-tab'}}

i.e.

{{#em-tabs selected-idx=tab_idx}}
        {{#em-tab-list}}
            {{#em-tab}}Sites{{/em-tab}}
            {{#em-tab}}Notes{{/em-tab}}
            {{#em-tab}}...{{/em-tab}}
        {{/em-tab-list}}
        {{#em-tab-panel}}
            {{outlet 'sites-tab'}}
        {{/em-tab-panel}}
        {{#em-tab-panel}}
            {{outlet 'notes-tab'}}
        {{/em-tab-panel}}
        {{#em-tab-panel}}
            <p>Future Use</p>
        {{/em-tab-panel}}
{{/em-tabs}}

and using:

renderTemplate: function() {
        this.render({
              into: 'contacts.show',    // the template to render into
              outlet: 'notes-tab'       // the name of the outlet in that template
        });

    }

in the two pods routes to place the content in the right place.

if i use the urls manually e.g:

contacts/5961168002383609856/sites
contacts/5961168002383609856/notes

Then the content is rendered into the relevant Tab (and the other is empty).

each pod structure is along the lines of:

app/pods/notes/-form/template.hbs

app/pods/notes/edit/controller.js
app/pods/notes/edit/route.js
app/pods/notes/edit/template.hbs

app/pods/notes/index/controller.js
app/pods/notes/index/route.js
app/pods/notes/index/template.hbs

app/pods/notes/new/controller.js
app/pods/notes/new/route.js
app/pods/notes/new/template.hbs

app/pods/notes/show/controller.js
app/pods/notes/show/route.js
app/pods/notes/show/template.hbs

app/pods/notes/base-controller.js
app/pods/notes/route.js

can you think of what would make ember-cli render both contents into each outlet on the same page?

my app/router.js contains:

Router.map(function() {
    this.resource("contacts", function() {
        this.route("new");
        this.route("edit", {path: ':contact_id/edit'});
        this.route("show", {path: ':contact_id'}, function(){
            this.resource("notes", function() {
                this.route('new');
                this.route('edit', {path: ':note_id/edit'});
            });
            this.resource("sites", function() {
                this.route('new');
                this.route('edit', {path: ':site_id/edit'});
            });
        });
    });
});

many thanks with any help you can suggest.. thanks.

EDIT:

OK, as per @Sam Selikoff suggestion I tried switching to components, doing:

ember generate component contact-sites
ember generate component contact-notes

created the files:

app/components/contact-notes.js
app/components/contact-sites.js

and

app/templates/components/contact-notes.hbs
app/templates/components/contact-sites.hbs

I then moved my template html from pods/notes/index/template.hbs into app/templates/components/contact-notes.hbs

This (with a few tweaks) seemed to display the content correctly. I then moved on to editing a Note. TO do this I have a button with an action: {{action "editNote" note}} so had to move my actions from pods/notes/index/route.js into app/components/contact-notes.js

for example:

app/components/contact-notes.js

import Ember from 'ember';

export default Ember.Component.extend({
    actions: {
        newnote: function(note) {
            console.log("NEW NOTE:", note.contact);
            this.transitionTo('notes.new');
            return false;
        },
        editNote: function(note) {
            console.log("Edit Note:", this);
            this._transitionTo('notes.edit', note);
            return false;
        }
    }
});

but I cant seem to get the Edit Note Route to work. I either (using this._transitionTo('notes.edit', note); ) get an error saying:

DEPRECATION: Ember.View#transitionTo has been deprecated, it is for internal use only

or if i use this._transitionTo('notes.edit', note); I get a different error:

TypeError: currentState is undefined
     if (currentState.enter) { currentState.enter(this); }

any thoughts on how I can get to a route from within a component? - thanks.

Upvotes: 1

Views: 554

Answers (1)

Sam Selikoff
Sam Selikoff

Reputation: 12704

In general you shouldn't need to call render or use named outlets that often. Instead, use components, something like

{{#em-tabs selected-idx=tab_idx}}
    {{#em-tab-list}}
        {{#em-tab}}Sites{{/em-tab}}
        {{#em-tab}}Notes{{/em-tab}}
    {{/em-tab-list}}
    {{#em-tab-panel}}
        {{contact-sites site=contact.sites}}
    {{/em-tab-panel}}
    {{#em-tab-panel}}
        {{contact-notes notes=contact.notes}}
    {{/em-tab-panel}}
{{/em-tabs}}

Remember your URL structure is tied to how your interface renders, so if you want two things to show simultaneously, don't tie them to two distinct URLs.

Upvotes: 1

Related Questions