CODEWITHSUNDEEP
javascriptember.jsviewcomponents
wallop
wallop

Reputation: 2571

How to programmatically add components or views inside other components/views in ember js

I have a component say {{component-1}} which gets called many times and creates a custom-texbox container and label as many times as it gets called.

Now whenever a user writes something in it a suggestion box should appear below it. Since the suggestion box can be reused everywhere i dont want to have a separate suggestion box for each {{component-1}}, rather i want to have another component called {{suggestion-box}} that gets inserted inside component-1 i.e. the textbox container.

I dont want {{suggestion-box}} to be inside dom at all since it is needed only when somebody types in it. I want to add/insert it into {{component-1}} when someone types. Instead of a component i even tried to use a view

Here are the different things i have tried and failed
Note:
suggestionBox is the component
textbox-container is an element inside {{component-1}}

  1. Inside {{component-1}}
    this.$().find(".textbox-container").append(this.suggestionBox );
    where this.suggestionBox = suggestionBoxComponent.create(); I have event tried suggestionBoxView.create();
    It gives me the error that i one view cant be inserted into another and i need to use containerView
  2. var tmp = Ember.Handlebars.compile('<div class=".suggestionBox"></div>');
    this.$().find('.textbox-container').append(tmp());
    I get the error called

    Uncaught TypeError: Cannot read property 'push' of undefined

  3. I even tried to use view instead of component i.e. make suggestionBox a view but then again i cannot insert one view inside another
  4. I have tried a lot more things.
Few points:

  1. I dont want alternate solutions of how textbox and suggestion box could be created
  2. How to pass information from a component or a a template to a view? Say i do {{view "suggestion-box"}} inside component-1 template, how do i pass values to it? Say for components we pass in the context like this {{component1 sampleVar1=val1 sampleVar2=val2}}
  3. i Want to know how to programmatically add a component or a view and if it is a view how to pass the data to it?

  4. I dont want to use container-view since it will cause more complexities, however if your solution allows me to pass value from {{component-1}} to container-view and inturn pass it to corresponding childView1 and childView2 then that solution is acceptable

    Just an update:

  5. I even tried to use a view container inside the {{component-1}}

  6. I also tried to use view block inside {{component-1}} i.e. {{#view "view-name"}} ----earlier component elements here----- {{/view}}
    In both the above points "view-name" is a ContainerView which is getting inserted properly but the component element are not getting inserted

Upvotes: 2

Views: 1012

Answers (1)

melc
melc

Reputation: 11671

This can be achieved with a ContainerView and the viewName attribute. The component or view can access the ContainerView or any other view that is part of a template through its assigned viewName.

Example,

hbs

{{view Ember.ContainerView viewName="my-menu-container"}}

js - then from the component or view

this.get("my-menu-container").pushObject(suggestionBoxViewOrComponent);

http://emberjs.jsbin.com/yoyujeqi/1/edit

p.s. the context of the example is not relevant to the suggestion box, sorry about that, as it has been extracted from another answer related to adding a menu view dynamically.

Upvotes: 1

Related Questions