1

アプリケーションで「ページ」として使用するHTMLテンプレートを動的にロードするBackbone.js/Require.jsアプリケーションを作成しました。これは、私のメインHTMLページがそのように見えることを意味します。

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

次に、アンダースコアテンプレートを使用して、新しい要素をDOMに動的にレンダリングしました。ただし、新機能ではRaphael.jsチャートを使用する必要があります。新しい要素を作成して<div id='canvas'></div>呼び出しRaphael('canvas')ましたが、キャンバス要素がDOMに対応していないため、Raphaelは新しく作成された要素を見ることができません。

このようにid参照の代わりにjQueryセレクターを使用しようとしましたRaphael($('#canvas'))が、これによりキャンバスがコンテナー要素ではなくbody要素にアタッチされます。

Raphaelキャンバスを動的に作成された要素にバインドする方法に関する提案はありますか？

4

4 に答える 4

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

他の場所でエラーが発生しましたが、Raphaelが起動しない主な問題は、jQueryセレクターが要素の配列を渡し、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

テンプレートが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 に答える
0

これは古すぎる質問であることは知っていますが、とにかく誰かに役立つ可能性があります。ビューがページに配置されていることを確認することが重要なので、onShow機能などを使用するか、レンダリングします。しかし、とにかく、Raphaelにこれを送信した場合、$ elまたは同様のものが期待どおりに受け入れられないため、Raphaelは正しく表示されません。あなたがする必要があるのは、this。$ el.first（）またはthis。$el[0]のようなものです。

于 2013-09-19T14:46:07.547 に答える