1

我创建了一个 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')，但由于 DOM 上没有 canvas 元素，Raphael 看不到新创建的元素。

我曾尝试使用 jQuery 选择器代替 id 引用，Raphael($('#canvas'))但这会将画布附加到 body 元素而不是我的容器元素。

关于如何将 Raphael 画布绑定到动态创建的元素的任何建议？

4

4 回答 4

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

虽然我在其他地方有错误，但导致 Raphael 不触发的主要问题是忘记了 jQuery 选择器传递了一个元素数组，而 Raphael 的构造函数想要一个元素。Raphael 将自己附加到主体上，因为它是选择器结果的顶级父级。

Mosselman 也正确地指出，您可以在 Backbone 中完全在内存中构建视图，然后将其附加到 DOM。

于 2012-05-29T18:26:20.177 回答
2

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

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-28T23:58:54.653 回答
0

我知道这是一个太老的问题，但无论如何它可以帮助某人。确保您的视图放置在页面上很重要，因此请使用 onShow 功能或渲染之类的东西。但无论如何，Raphael 不会正确显示，因为如果您向 Raphael 发送 this.$el 或类似的东西，它不会像您期望的那样接受它。你需要做的是这样的事情。$el.first() 或 this.$el[0]。

于 2013-09-19T14:46:07.547 回答
0

似乎一个好方法是在模板添加到 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() 方法并从事件处理程序中调用它（与我上面显示的相比），但希望这会为您指明正确的方向。

于 2012-05-28T23:08:15.403 回答