動態創建的元素用於拉斐爾帆布

我創建了一個Backbone.js/Require.js應用程序，該應用程序動態加載HTML模板以在應用程序中用作「頁面」。這意味着我的主HTML頁面看起來像這樣。動態創建的元素用於拉斐爾帆布

<head> 
    // Necessary CSS and Javascripts here 
</head> 
<body> 
    <div id="container"></div> 
</body>

然後我用下劃線模板動態地向DOM呈現新元素。但是，新功能需要使用Raphael.js圖表。我創建了一個新的元素<div id='canvas'></div>並且調用Raphael('canvas')但由於canvas元素不在DOM準備好的位置，所以Raphael看不到新創建的元素。

我已經嘗試使用jQuery選擇器代替id引用，如Raphael($('#canvas'))，但這會將畫布附加到body元素而不是我的容器元素。

關於如何將Raphael畫布綁定到動態創建的元素的任何建議？

來源

2012-05-28 srquinn

解決此問題的一種方法是在視圖中創建一個空元素並將所有內容綁定到該元素上。我從來沒有與拉斐爾的工作，但我認爲這可能是工作：

var someView = Backbone.View.extend({ 
    el: document.createElement('div'), // This creates a DOM element '<div></div>' 

    initialize: function(){ 
     Raphael(this.el); // Attach Raphael, you could also go with jQuery 
    }, 

    render: function(){ 
     jQuery('#container').append(this.el); // Add to DOM somehow 
    } 
})

來源

2012-05-28 23:58:54 Mosselman

今天早上我醒了，「呃！」並意識到你的答案確實是對的。我忘記了Backbone視圖的一個主要原則，就是你可以在內存中構建它們，然後將它們附加到DOM。謝謝你的大腦顛簸！ – srquinn

我的編輯是正確的方式...我想給你的代表，儘管...請接受我的編輯，讓其他人可以看到完全如何做到這一點，否則我只會自己回答這個問題 – srquinn

@jibsales編輯被拒絕其他基於它改變了我答案的大部分含義。我相信我的答案更普遍適用，您的答案更符合您的具體情況。謝謝你想給我信貸，但非常感謝。你當然可以隨心所欲地自己做答案:)。很高興我能幫助我們讓腦子恢復活力，我們都在那裏，而且我們都一直在那裏。 – Mosselman

似乎是一種很好的方法，可以在模板添加到DOM之後拋出一個事件，並且您可以調用Raphael（'canvas'）監聽該事件或使用回調來觸發Raphael（'canvas' ）。在這兩種情況下，您都確保在目標元素到位之前不要調用拉斐爾（'帆布'）。

很不客氣，這樣的事情：

//from your raphael module/code 
$(document).on('canvasAdded', function(){ 
    var paper = Raphael('canvas'); 
    //stuff! 
}); 

//after you are sure your template has rendered 
$(document).trigger('canvasAdded');

你可能要做出某種的.init（）方法，並調用從事件處理（對我表現出以上），但希望這點你在正確的方向。

來源

2012-05-28 23:08:15 busticated

沒有骰子。在將模板添加到DOM後立即調用console.log（document）時，我可以看到該元素，並且我可以遍歷Firebug中的結果樹以查找添加的「canvas」元素，但是當我調用document.getElementById（'畫布'）我得到空。 – srquinn

你可以通過螢火蟲的或鉻的js控制檯啓動raphael嗎？（只是加載你的應用程序，並進入你期望的狀態，然後進入拉斐爾（'帆布'）;） – busticated

nope ...返回一個未定義的元素...我開始認爲這是不可能的，因爲我現在已經對幾個事件委託方法進行了沙盒處理，而沒有使用Backbone/Require，並且我得到了相同的結果。 – srquinn

Raphael($('#canvas').first(), '100%', '100%')

雖然我有錯，別的地方，造成拉斐爾不火的主要問題是忘記了jQuery選擇通過數組Elements和Raphael的構造函數只需要一個元素。拉斐爾將自己附屬於身體，因爲它是選擇者結果的頂級父母。

Mosselman也指出你可以在Backbone中完全在內存中創建一個視圖，然後將它附加到DOM。

來源

2012-05-29 18:26:20 srquinn

我知道這是過時的問題，但無論如何它可以幫助某人。確保你的視圖放置在頁面上很重要，所以請使用onShow功能或渲染。但無論如何拉斐爾不會表現出正確的，因爲如果你發送給拉斐爾這個$ el或類似的東西，它不會像你期望的那樣接受它。你需要做的是這樣的：$ el.first（）或者這個。$ el [0]。

來源

2013-09-19 14:46:07 zmilan

動態創建的元素用於拉斐爾帆布

回答

相關問題