Question

我正在考虑将Ember与现有的Rails应用程序集成，以利用Ember的绑定，事件（didInsertElement等）......

现在我不想将我的erb视图转移到把手，而是我想要创建Ember View对象并将它们附加到DOM中已有的各种元素。例如，我可能有

<html>
  <body>
    <div class="header">

    </div>

    <div class="content">

    </div>

    <div class="footer">

    </div>
  </body>
</html>

和（在DOM就绪时）为每个元素创建一个View：

App.HeaderView = Ember.View.create({
   // capture $('.header') to this
   // console.log(this.$().attr('class')) should then output `header`
});

Answer 1

在视图上使用appendTo()：App.HeaderView.appendTo('.header')请参阅http://jsfiddle.net/yFke9/

<强>更新

我认为目前这是不可能的。请证明我错了！您可以为此创建一个解决方法，虽然这是一个黑客攻击，请参阅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();

如果您正在使用此解决方案，您可以编写一个可以为您处理此问题的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();

Answer 2

好的以下作品，但我还没有完全测试过。

受@ pangratz的pull request启发我使用以下方法扩展Ember.View

Ember.View = Ember.Object.extend(
  /** @scope Ember.View.prototype */ {
  // ........

  wrap: function(target) {
    this._insertElementLater(function() { 
       // Set all attributes name/values from target
       var target_attrs = {};
       var $this = this.$();

       for (var attr, i=0, attrs=$(target)[0].attributes, l=attrs.length; i<l; i++){
          attr = attrs.item(i)
          var attrName = attr.nodeName;
          var attrValue = attr.nodeValue;

          if(attrName === 'id') continue;
          $this.attr(attrName, attrValue);
       }

       // Set HTML from target
       $this.html($(target).html()); 
       Ember.$(target).replaceWith($this); 

    });   
    return this;

  },        

  // ........

});

基本上它复制了目标元素的html内容及其属性。然后只做

App.HeaderView = Ember.View.create().wrap('.header');

.header元素（已经在DOM中）现在位于App.HeaderView中。

请参阅http://jsfiddle.net/KFcgA/4/

从jQuery对象创建Ember View

2 个答案: