Question

我创建了一个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画布绑定到动态创建元素的任何建议吗？

Answer 1

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

虽然我在其他方面有错误，导致Raphael无法解决的主要问题是忘记了jQuery选择器传递了一个Elements数组，Raphael的构造函数想要一个元素。拉斐尔将自己附加到身体上，因为它是选择者结果的顶级父母。

Mosselman也指出你可以在Backbone中完全在内存中构建一个视图，然后将它附加到DOM中。

Answer 2

解决此问题的一种方法是在视图中创建一个空元素并将所有内容绑定到该元素上。我从未与拉斐尔合作，但我认为这可行：

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
    }
})

Answer 3

似乎一个好的方法是在模板添加到DOM之后抛出一个事件并让你调用Raphael（'canvas'）监听该事件或使用回调来触发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（）方法，并从事件处理程序中调用它（与我上面显示的相反），但希望这能指出你正确的方向。

Answer 4

我知道这是一个太老的问题，但无论如何它对某人有帮助。确保您的视图放在页面上非常重要，因此请使用onShow功能或渲染。但是无论如何拉斐尔都不会表现出来，因为如果你发送给拉斐尔这个。或者类似的东西，它就不会像你期望的那样接受它。你需要做的是这样的事情。$ el.first（）或者这个。$ el [0]。

用于拉斐尔画布的动态创建元素

4 个答案: