Ember Js Adding A Model Which is Dynamically Rendered On the UI

Question

Hi all I have an issue i want to add another item to my model that is dynamically rendered on the UI.

However after i add it It still doest render on the UI. Do I need to call a function after adding it to the list of models?

Here is an example:

http://emberjs.jsbin.com/mugodifiki/edit?html,js,output

on clicking on an image it is suppose to add a predefined model to the array and display it on the UI

If the proposed solution worked for your issue please respond, to assist others as well, thanks! — melc, Jul 28 '15 at 07:17
@melc Hi thanks for the answer. It is solved the issue/limitations of owl carousel really appreciate it. — Shivam Sinha, Jul 28 '15 at 08:16

score 1 · Accepted Answer · answered Jul 16 '15 at 08:44

This is clearly an issue caused from the integration with owlcarousellibrary. A simple example of dynamically changing the model and rendering the ui, in plain emberjs, can be found here, http://emberjs.jsbin.com/lodetofere/edit?html,js,output (simply click on the list).

This specific issue is caused due to the modifications of the DOM by the owlcarousel library. So to solve this, it is required to refresh the owlcarousel after changing the model and restoring the initial state of the dom.

Example,

http://emberjs.jsbin.com/qanocidoye/edit?html,js

The content part of the template is actually refreshed when the model changes by toggling a property and the carousel is reinitialized.

hbs

<script type="text/x-handlebars" data-template-name="components/test-component">
  {{#if refresh}}
  {{partial "owlContent"}}
{{else}}
  {{partial "owlContent"}}
{{/if}}
  </script>
  <script type="text/x-handlebars" data-template-name="_owlContent">
    <div class="owl-carousel owl-theme">
  {{#each titleModels}}
<div class="item">
    <img {{action "owlItemClicked" this on="click" }} {{bind-attr src=img}}>
</div>
{{/each}}
</div>
  </script>

js

App.TestComponentComponent = Ember.Component.extend({

//     classNames: ['owl-carousel', 'owl-theme'],
    items: 8,
    touchDrag: true,
    mergeFit: false,
    center: true,
    addClassActive: true,
    mouseDrag: true,
    slideSpeed : 1000,
    margin: 2,
  refresh:false,


initCarousel:function(){
  var self = this;
            var options = {};

            options.items = self.get('items');
            options.touchDrag = self.get('touchDrag');
            options.mergeFit = self.get('mergeFit');
            options.center = self.get('center');
            options.addClassActive = self.get('addClassActive');
            options.mouseDrag = self.get('mouseDrag');
            options.slideSpeed = self.get('slideSpeed');
            options.margin = self.get('margin');
            self._options =   options;
            self._owl = self.$(".owl-carousel").owlCarousel(options);
},
    didInsertElement: function(){
            this.initCarousel();
    },
  refreshCarousel:function(){
    var self = this;
   Em.run.next(function(){
      self.initCarousel();
    });
  }.observes('refresh'),


  actions: {
    owlItemClicked: function(titleModel) {
      var self = this;
      var content = "<div class=\"item dodgerBlue\"><h1>test</h1></div>";
         var newModel = Ember.Object.create({ index: 3, img: "http://www.cs.rice.edu/~dwallach/comp314_f99_ga/%257Eavinash/comp314/project3/pretty/pic1s.jpg"});
      console.log(this.get('titleModels'));
      //THIS ADDS IT TO THE MODEL BUT IS NOT RENDERED ON UI
      this.get('titleModels').push(newModel);
      alert('new model has been added');
      console.log(this.get('titleModels'));

      this.toggleProperty("refresh");
    }
  }
});

You may come up with a more elegant solution but this is the main idea.

Ember Js Adding A Model Which is Dynamically Rendered On the UI

1 Answers1

Linked