我正在考虑将Ember与现有的Rails应用程序集成,以利用Ember的绑定,事件(didInsertElement等)......
现在我不想将我的erb视图转移到把手,而是想要创建Ember View对象并将它们附加到DOM中已有的各种元素.例如,我可能有
<html>
<body>
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
和(在DOM准备好的情况下)为每个元素创建一个View:
App.HeaderView = Ember.View.create({
// capture $('.header') to this
// console.log(this.$().attr('class')) should then output `header`
});
Run Code Online (Sandbox Code Playgroud)
使用appendTo()
上的看法:App.HeaderView.appendTo('.header')
看http://jsfiddle.net/yFke9/
UPDATE
我认为目前这是不可能的.请证明我错了!您可以为此创建一个解决方法,虽然这是一个黑客,请参阅http://jsfiddle.net/jFTk5/.解决方法基本上是通过回调append()
内部和内部添加视图,didInsertElement
它通过jQuery替换特定元素replaceWith
.
App.HeaderView = Ember.View.create({
template: Ember.Handlebars.compile('hello from HeaderView'),
classNames: ['header'],
didInsertElement: function() {
Ember.$('.header').replaceWith(this.$());
}
}).append();
Run Code Online (Sandbox Code Playgroud)
如果您正在使用此解决方案,您可以编写一个可以为您处理此问题的Mixin,请参阅http://jsfiddle.net/KFcgA/.
App.ReplaceWith = Ember.Mixin.create({
didInsertElement: function(){
var el = this.get('elementToReplace');
Ember.$(el).replaceWith(this.$());
}
});
App.HeaderView = Ember.View.create(App.ReplaceWith, {
template: Ember.Handlebars.compile('Hello from HeaderView'),
classNames: ['header'],
elementToReplace: '.header'
}).append();
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
1811 次 |
最近记录: |