Question

我有一个要求，我需要在渲染DOM后添加html。我想知道在创建之后是否可以操作DOM并动态添加html并指定相关的ember操作。

E.g。我想要实现的目标的内涵：

 $('.add').on("click", function(e){
    e.preventDefault();
    i += 1;
    var content = "<div class=\"item dodgerBlue\"><h1>"+i+"</h1></div>";
    var content + "{{action "owlItemClicked" titleModel.id titleModel.index titleModel on="click" }}"
    owl.data('owlCarousel').addItem(content);
  });

具体来说我想在我的轮播中添加另一个项目： http://owlgraphic.com/owlcarousel/demos/manipulations.html

Answer 1

我不确定三重藏匿，只包含内容而不会转义它，可以使用{{action}}。在任何情况下，我认为你最好只是在每个块中定义html并让Ember处理内容添加。

{{#each model as |titleModel index|}}
  <div class=\"item dodgerBlue\">
    <h1>{{index}}</h1>
  </div>
  {{action "owlItemClicked" titleModel.id titleModel.index titleModel on="click" }}
{{/each}}

我注意到你有一个titleModel.index属性，所以也许你不需要每个块中的索引，而是可以使用模型的属性。

这将是Ember的做法。但是，看起来这个OwlCarousel小部件想要直接传递html。但是也有一种重新启动方法，所以也许这足以告诉它已经通过Ember添加了新内容。如下所示：

carouselOptions: {
  // ...
},

didInsertElement: function() {
  Ember.run.scheduleOnce('afterRender', this, function() {
    var $c = Ember.$('#the-carousel');
    if ($c.length) {
      $c.owlCarousel( this.get('carouselOptions') );
    }
  });
},

actions: {
  addCarouselItem: function(e){
    e.preventDefault();

    // Add a new item to your array.
    // Not shown because i have no idea of your code.
    // Ember will handle DOM insert.
    // Then reinit carousel.
    $("#the-carousel").data('owlCarousel').reinit( this.get('carouselOptions') );
  },

  owlItemClicked: function(e) {
    // ...
  }
}

Ember动态生成的HTML

1 个答案: