CODEWITHSUNDEEP
ember.js
Shivam Sinha
Shivam Sinha

Reputation: 5150

Ember Binding Component Template to Models

Hi I have the following Component Template:

test-component.hbs: (produces img tag per model)

{{#each titleModels}}
<div class="item">
    <img {{action "owlItemClicked" id index on="click" }} {{bind-attr src=img}}></img>
</div>
{{/each}}

Its used in parent template

parent.hbs:
{{test-component action="titleClicked" parentController=controller titleModels=model}}

On titleClicked action it is suppose to remove the clickedModel and refresh the template to show the removed view.

parent-controller.js:
   modelChanged: false,
   actions: {
        titleClicked: function(){
           self.get('model').removeObject(aSelectedModel);
           self.set('modelChanged',true);
         }
   }

The test-component observes changes to titlesModel and rerenders the template:

test-component.js:

titleModelsChanged: function(){
   this.rerender();
 }.observes('parentController.modelChanged'),

this.rerender methos is called successfully and the specific html tag (e.g the one defined below) for the removed model is no longer present in the DOM for html page generated from test-component.hbs as expected.

 <img {{action "owlItemClicked" id index on="click" }} {{bind-attr src=img}}></img>

The img tags for the remaining models are present when inspecting the dom. However they are not displayed out the actual html page ( i dont see the actual imgs), even though the are present in the DOM when I inspect the elements.

How do I display the img tags of the remaining models after rerender on the html page ?

Upvotes: 0

Views: 258

Answers (1)

yorbro
yorbro

Reputation: 1137

First, two small notes. The <img> tag must not have a closing tag. So no <img></img> but simply <img> (or <img /> alternatively).

The context-changing {{each}} as you use it is deprecated in current and future versions of Ember.js. So you should rewrite your component as

{{#each titleModels as |titleModel|}}
  <div class="item">
    <img {{action "owlItemClicked" titleModel.id titleModel.index on="click" }} {{bind-attr src=titleModel.img}}>
  </div>
{{/each}}

Now to your question. Given that the <img> tags are in the DOM but the actual image is not visible, the problem must be in the src attribute of the images. If you open the URL in the src in a separate tab, do you see the image you're supposed to see?

The JSBin http://emberjs.jsbin.com/mitadovero/edit?html,js,output solves the problem.

Upvotes: 1

Related Questions