jQueryを使用して動的にdivを作成し、そのdivのIDをrenderer3Dのコンテナーとして渡します。私がする時:
r.container = id
JSコンソールに「指定されたコンテナが見つかりませんでした」というエラーが表示されます。チェックしたところ、divがDOMにあり、表示されています。奇妙なことに、これは正常に機能していましたが、XTKライブラリをロードするタイミングに小さな変更を加えました。
jQueryを使用して動的にdivを作成し、そのdivのIDをrenderer3Dのコンテナーとして渡します。私がする時:
r.container = id
JSコンソールに「指定されたコンテナが見つかりませんでした」というエラーが表示されます。チェックしたところ、divがDOMにあり、表示されています。奇妙なことに、これは正常に機能していましたが、XTKライブラリをロードするタイミングに小さな変更を加えました。
https://github.com/xtk/X/commit/77d6c1e6e3062465acc297f782f410cf5a470211をコミットする と、すべて機能するはずです。問題は、Google ClosureCompilerが$を使用してコードを最適化し、これによりjQueryの使用が中断されることでした。
こちらの例を参照してくださいhttp://jsfiddle.net/YLVPr/
var element = $(document.body);
//container.show();
var id = 'xtkwidget_' + 1;//utils.uuid();
var xtkdiv = $('<div/>').attr('id',id);
xtkdiv.css('background-color','#FFF').width(400).height(300);
element.append(xtkdiv);
var obj_c54ce3e329b84364b5542aeb4c303ece = new X.renderer3D();
obj_c54ce3e329b84364b5542aeb4c303ece.container = document.getElementById(id); // NOTE here we have to pass the original div, not the id or the jQuery object
obj_c54ce3e329b84364b5542aeb4c303ece.init();
var obj_bd99e35ed147423faa2a2d77cbc540af = new X.mesh();
obj_bd99e35ed147423faa2a2d77cbc540af.magicmode = true;
obj_bd99e35ed147423faa2a2d77cbc540af.opacity = 0.700000;
obj_bd99e35ed147423faa2a2d77cbc540af.color = [1.000000,1.000000,1.000000];
obj_bd99e35ed147423faa2a2d77cbc540af.file = "http://x.babymri.org/?avf.vtk";
obj_c54ce3e329b84364b5542aeb4c303ece.add(obj_bd99e35ed147423faa2a2d77cbc540af);
obj_c54ce3e329b84364b5542aeb4c303ece.render();
コードはかなり複雑な Web アプリの一部です。実際の JavaScript コードはサーバーによって動的に生成され、JSON 経由でブラウザーに送信され、eval に渡されます。コードの例を次に示します。
container.show();
var id = 'xtkwidget_' + utils.uuid();
var xtkdiv = $('<div/>').attr('id',id);
xtkdiv.css('background-color','#FFF').width(400).height(300);
element.append(xtkdiv);
var obj_c54ce3e329b84364b5542aeb4c303ece = new X.renderer3D();
obj_c54ce3e329b84364b5542aeb4c303ece.container = id;
obj_c54ce3e329b84364b5542aeb4c303ece.init();
var obj_bd99e35ed147423faa2a2d77cbc540af = new X.mesh();
obj_bd99e35ed147423faa2a2d77cbc540af.magicmode = true;
obj_bd99e35ed147423faa2a2d77cbc540af.opacity = 0.700000;
obj_bd99e35ed147423faa2a2d77cbc540af.color = [1.000000,1.000000,1.000000];
obj_bd99e35ed147423faa2a2d77cbc540af.file = "files/smallsurface.vtk";
obj_c54ce3e329b84364b5542aeb4c303ece.add(obj_bd99e35ed147423faa2a2d77cbc540af);
obj_c54ce3e329b84364b5542aeb4c303ece.render();
このあたりにもっとコード行を追加できますか?
最初に考えられる問題: ID はどのように書きましたか? jQuery とは異なり、'#xtkcontainer' ではなく、'xtkcontainer' である必要があります。
別の考えられる問題: ウィンドウの読み込みが終了する前にコード行が実行されます。コードは本体の後に記述されていますか、「window.onload」関数で記述されていますか、またはユーザーまたはタイムアウト イベントによるウィンドウの読み込み後に実行されていますか?
リコラ3D