从一个jQuery对象

我期待与现有的Rails应用程序集成灰烬灰烬创建视图，采取Ember的绑定，事件（didInsertElement等）的优势......从一个jQuery对象

现在我不想将我的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` 
});

来源

2012-03-08 Panagiotis Panagi

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

通过@ 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/参见

来源

2012-03-08 17:53:11

在视图上使用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();

如果你使用这个解决方案，您可以写一个混合这为您处理此去，看到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();

来源

2012-03-08 13:36:46 pangratz

这不是捕获'.header'元件成App.HeaderView。它只是将**添加到''.header'元素中。 – 2012-03-08 14:32:29

我假设你想这样做，因为你写的'附加至$' – pangratz 2012-03-08 14:34:55

编辑我的问题，以澄清 – 2012-03-08 14:35:38

从一个jQuery对象

回答

相关问题