Ember Js添加一个在UI上动态渲染的模型 [英] Ember Js Adding A Model Which is Dynamically Rendered On the UI

问题描述

我有一个问题，我想添加另一个项目到我的模型，在UI上动态呈现。

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

然而，我添加它后，它仍然做最好的渲染在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?

以下是一个示例：

http://emberjs.jsbin.com/mugodifiki/edit?html,js，输出

点击图片可以将预定义的模型添加到数组，并在UI上显示

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

推荐答案

这显然是与 owlcarousel 库的集成引起的问题。可以在这里找到一个简单的例子，动态地改变模型并渲染ui，这里可以在这里找到
http://emberjs.jsbin.com/lodetofere/edit?html,js,output （只需点击列表）。

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).

此特定问题是由于owlcarousel库对DOM的修改而导致的。所以要解决这个问题，需要在更改模型并恢复dom的初始状态后刷新owlcarousel。

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.

示例，

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添加一个在UI上动态渲染的模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！