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

问题

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

回答1:

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>

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.

来源：https://stackoverflow.com/questions/31444060/ember-js-adding-a-model-which-is-dynamically-rendered-on-the-ui

标签

ember.js