Ember.js 从jQuery对象创建余烬视图_Ember.js

Ember.js 从jQuery对象创建余烬视图

ember.js

Ember.js 从jQuery对象创建余烬视图,ember.js,Ember.js,我正在考虑将Ember与现有的Rails应用程序集成，以利用Ember的绑定、事件（didInsertElement等）现在我不想将erb视图转移到handlebar，而是想创建Ember视图对象，并将它们附加到DOM中已有的各种元素。例如，我可能有 <html> <body> <div class="header"> </div> <div class="content"> </div

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

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

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

    </div>

    <div class="content">

    </div>

    <div class="footer">

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

在视图上使用

appendTo（）

：

App.HeaderView.appendTo（'.header'）

请参阅

更新

我认为这目前是不可能的。请证明我错了！您可以为此创建一个解决方案，尽管这是一个黑客攻击，请参阅。该解决方法基本上是通过

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来为您处理此问题，请参阅

好的，下面的工作，但我还没有完全测试它

受@pangratz的I extend

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;

  },        

  // ........

});

.header
元素（已经在DOM中）现在位于App.HeaderView中
请参见
这不是将.header
元素捕获到App.HeaderView中。它只是将它添加到.header
元素中。我假设您希望这样做，因为您编写了将它附加到$（'.header'）我为此问题创建了一个拉取请求：我认为它仍然无法按预期工作，因为它删除了以前的内容。一种可能的方法是使用App.HeaderView.$（）.attr（'id'）获取App.HeaderView id属性。然后，设置.header的id，最后设置App.HeaderView.$（）.remove（）。仍在进行中…好的，那么您想将现有的DOM元素包装到一个Ember.View中吗？你能举个更详细的例子吗？头分区内有什么？
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();

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;

  },        

  // ........

});

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