从 jQuery 对象创建 Ember 视图答案

【问题标题】：Create Ember View from a jQuery object从 jQuery 对象创建 Ember 视图
【发布时间】：2012-03-08 12:38:41
【问题描述】：

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

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

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

    </div>

    <div class="content">

    </div>

    <div class="footer">

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

并且（在 DOM 就绪时）为每个元素创建一个视图：

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

【问题讨论】：

标签： ember.js

【解决方案1】：

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

更新

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

【讨论】：

这不是将.header 元素捕获到 App.HeaderView 中。它只是将它添加到 .header 元素中。
我以为你想这样做是因为你写了attach this to $('.header')
我为此问题创建了一个拉取请求：github.com/emberjs/ember.js/pull/574
我认为它仍然无法按预期工作，因为它删除了以前的内容。一种可能的方法是使用 App.HeaderView.$().attr('id') 获取 App.HeaderView id 属性。然后，设置.header的id，最后设置App.HeaderView.$().remove()。还在努力……
好的，那么您想将现有的 DOM 元素包装在 Ember.View 中吗？你能举一个更详细的例子吗？ .header div 里面有什么？

【解决方案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/

【讨论】：