Question

我想将一个Ember组件ComponentB附加到一个DOM元素，该元素由didInsertElement ComponentA上的某个非Ember UI库生成，结果类似于

<div class='ember-view component-a'>
   <div class='i-know-nothing-of-ember'>
      <div class='ember-view component-b'></div>
   </div>
</div>

我知道appendTo(element)方法，但它失败了断言

您无法附加到现有的Ember.View。请考虑使用Ember.ContainerView。

我还尝试在组件B上调用createElement，然后通过jQuery将其附加到DOM - 这种方式有效，但最终失败并出现错误

无法设置属性＆＃39; _elementInserted＆＃39;为null

请参阅http://emberjs.jsbin.com/cofebo/2/

实现上述目的的正确的方法是什么？如果可能的话，行为和其他行为应该像组件A模板生成i-know-nothing-of-ember一样。

Answer 1

我建议使用容器查找组件，并在需要时将其附加到任何位置。

方法1 - 在路线中检索容器

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

<强> JS

App = Ember.Application.create();

App.IndexRoute = Em.Route.extend({
  setupController:function(controller,model){
    controller.set("container",this.container);
  }
});

App.IndexView = Em.View.extend({

  appendNonEmberUILibrary:function(){
    callNonEmberUILibrary();
    var componentB = this.get("controller.container").lookup("component:component-b");
    componentB.appendTo(".non-ember-ui");
  }.on("didInsertElement")
});

App.ComponentBComponent = Em.Component.extend({
  layoutName:"components/component-b",
  prop1:"test-option-1"
});


function callNonEmberUILibrary(){
  $("body").append("<div class='non-ember-ui' style='border:1px solid;'>element from non-ember ui lib</div>");
}

<强> HBS

<script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>
    <h3>Adding Ember Component to non-Ember DOM Element using <u><i>container</i></u></h3>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="components/component-b">
  <br/>
  <div style="border:1px dashed #F5664D">
  This is componentB ->  {{prop1}}
  </div>
  <br/>
  </script>

方法2 - 在初始化程序中检索容器

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

<强> JS

App = Ember.Application.create();

App.initializer({
  name:"main",
  initialize:function(container,application){
     application.register('main:compB', container.lookup("component:component-b"), { instantiate: false });
     application.inject("controller:index","theComponentB","main:compB");
  }
});

App.IndexView = Em.View.extend({

  appendNonEmberUILibrary:function(){
    callNonEmberUILibrary();
    var componentB = this.get("controller.theComponentB");
    componentB.appendTo(".non-ember-ui");
  }.on("didInsertElement")
});

App.ComponentBComponent = Em.Component.extend({
  layoutName:"components/component-b",
  prop1:"test-option-1"
});


function callNonEmberUILibrary(){
  $("body").append("<div class='non-ember-ui' style='border:1px solid;'>element from non-ember ui lib</div>");
}

<强> HBS

<script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>
    <h3>Adding Ember Component to non-Ember DOM Element using <u><i>container</i></u></h3>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="components/component-b">
  <br/>
  <div style="border:1px dashed #F5664D">
  This is componentB ->  {{prop1}}
  </div>
  <br/>
  </script>

Approach3 - 使用jquery重新分配添加的组件（从评论中更新）

或者您可以将模板中的component-b添加为不可见，并且在didInsertElement内您可以重新分配并使用jquery在任何需要的位置显示它。

示例http://jsbin.com/maginovexa/1/edit?html,js,output

<强> JS

App.IndexView = Em.View.extend({
  prop2:"prop-from-index-view",
  appendNonEmberUILibrary:function(){
    callNonEmberUILibrary();
    //var componentB = this.get("controller.container").lookup("component:component-b");
    //componentB.appendTo(".non-ember-ui");
    var componentBDOM = this.get("componentB").$().detach();
    $(".non-ember-ui").append(componentBDOM);
  }.on("didInsertElement"),
  click:function(){this.set("prop2",Date.now());}
});

App.ComponentBComponent = Em.Component.extend({
  layoutName:"components/component-b",
  prop1:"test-option-1"
});


function callNonEmberUILibrary(){
  $(".inner").append("<div class='non-ember-ui' style='border:1px solid;'>element from non-ember ui lib</div>");
}

<强> HBS

<script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>
    <h3>Adding Ember Component to non-Ember DOM Element using <u><i>container</i></u></h3>
    <div class='inner'></div>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">
  this is index (click here to change prop2 of component)
  <div style="display:none">
    {{component-b prop2=view.prop2 viewName="componentB"}}
    </div>


  </script>
....

这是一个完全有效的解决方案，用于按照Simon Jesenko（操作手册）的要求，将余烬控制的元素重新分配到ember视图中的非余烬元素。

Answer 2

您是否尝试过运行循环？像这样，

//after comp.createElement();

parent = this;

Ember.run.schedule('afterRender', this, function() {

  parent.$('.i-know-nothing-of-ember').append($(comp.element));

});

将Ember组件附加到不受Ember管理的DOM元素

2 个答案: