- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想将 Ember 组件 ComponentB
附加到由 ComponentA
的 didInsertElement
上的某些非 Ember UI 库生成的 DOM 元素>,结果类似于
<div class='ember-view component-a'>
<div class='i-know-nothing-of-ember'>
<div class='ember-view component-b'></div>
</div>
</div>
我知道 appendTo(element)
方法,但是它因断言而失败
You cannot append to an existing Ember.View. Consider using Ember.ContainerView instead.
我还尝试在组件 B 上调用 createElement
,然后通过 jQuery 将其附加到 DOM - 这种方法可行,但最终失败并出现错误
Cannot set property '_elementInserted' of null
参见http://emberjs.jsbin.com/cofebo/2/
实现上述目标的正确方法是什么?如果可能的操作和其他行为应该像 i-know-nothing-of-ember
一样由组件 A 模板生成。
最佳答案
我建议使用容器来查找组件并在需要时将其附加到任何地方。
方法 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>
<小时/>
方法3 - 使用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 控制的元素重新分配给 ember View 内的非 ember 元素。
关于ember.js - 将 Ember 组件附加到不受 Ember 管理的 DOM 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28165802/
我每天运行命令将新记录插入 BigQuery 表,并想记录每天插入的记录数。 我创建了一个 QueryJob包含 SELECT 查询和 destination 表的对象。我将 write_dispos
当您登录受密码保护的页面时,WordPress 会设置一个类似于 wp-postpass_hash 的 cookie。 这个 cookie 似乎永远存在。我希望能够为用户提供“注销”链接。如果我不知道
我正在用 C++ 设计一个公共(public) API,我相信我想保留 C++ 属性函数样式约定,它们看起来像 int& Value() 和 const int& Value() const 而不是按
我正在构建一个使用 jQuery 图片库的网站。你可以看一个例子 here . 出于某种原因,当画廊更改图像时,或者当您手动更改图像时,页面高度似乎因为需要更好的词而“闪烁”。新图像似乎增加了页面高度
我正在尝试使用 CSS3 实现一个简单的 3D 照片库。它在 IE10+ 浏览器上运行良好,但在最新版本的 chrome 上有一个小错误,即单击时按钮消失。谁能告诉我如何解决这个问题?提前谢谢你。 w
我想知道为什么其中一些程序会抛出段错误,而另一些则不会。 这个程序抛出一个段错误: #include int main(){ int ar[2096263]; printf("asd
今天我移植了我的旧内存基准测试 从 Borland C++ builder 5.0 到 BDS2006 Turbo C++,发现奇怪的事情。 BCB5 的 exe 运行正常且稳定 来自 BDS2006
下面是我的代码,用于解决 PE 问题 7(“找到第 10001 个素数”): #include using namespace std; bool isPrime(int n, int primes
我有两个 float 元素,右边和左边。 它们的父元素都是 text-align: center, margin: auto: 1. text 999 ' style='curso
我正在为我的 UI 元素制作一个简单的动画。 我有一个动画组件,它有 2 个不同的动画 - ZoomIn 和 ZoomOut。 每当需要在屏幕上显示 UI 元素(例如按钮)时,就会显示这些动画。 我通
我正在使用 .net 3.5 和 vb.net。我对下面提到的每种加密的内部工作知之甚少。我只使用 .net 类库中提供的类。 我有一段信息已经用 TripleDes 加密,然后是 Rijndael,
我有一个关于正确设计 php 文件及其在服务器上的存储的一般性问题。 问题是这样的:我将一个 php 对象的函数拆分到不同的 php 文件中,例如: 文件 1 AndroidFlashCard.php
我在地址表单输入上有自动完成功能。当用户点击建议时,州和邮政编码信息会自动填充。cp_state 是带有状态名称下拉列表的选择框,而cp_zipcode 是邮政编码的输入文本。 我使用下面的 java
我试图按顺序选择记录,但随机限制。 SELECT * FROM tm_winners WHERE paid_out=0 ORDER BY DESC LIMIT RAND(4,8) 但是,我似乎无法随机
我有一张这样的表,我想选取 20 位 HitTest 门的歌手并按字母顺序对他们(这 20 位歌手)进行排序。 id name hit --------------
我正在尝试使用受风影响的雨粒子,也就是 physicsWorld 重力。 我可以看到重力确实对我的 SKSpriteNode 有影响,但我无法对 SKEmitterNode 产生相同的影响。 我只是想
我有一个问题,我在网站加载时调用淡入,但由于 css 过渡效果,元素变为完全不透明,立即淡出然后淡入,我试图找到解决这个问题的方法,因为它看起来很糟糕 jQuery $(window).on("loa
我定义了一个容器元素,包含一个float div和一个ul,并且 ul 元素包含一些 float li 元素。我想清除 ul 的 float ,但 ul 的高度受其 float 兄弟元素的影响。这是
我想使用一项服务。我 100% 确信该服务可以正常工作。 服务电话 public void add(User user) { ConnectionRequest con = new Connectio
如果您在桌面/PC 上访问某人的 instagram 页面,单击搜索栏时,它会向左浮动,然后可以输入文本进行搜索。当搜索字段中没有文本时,搜索图标和“搜索”占位符会回到原来的中心位置。 我假设 jav
我是一名优秀的程序员,十分优秀!