從一個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對象

回答

相關問題