从jQuery对象创建Ember View

Pan*_*agi 3 ember.js

我正在考虑将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)

pan*_*atz 5

使用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)