1

mootools を使用して、フォーム オブジェクトを作成し、動的に div を作成する「ビルダー」クラスがあります。一部のフォーム オブジェクトは、複数の異なるオブジェクトで構成されています。たとえば、選択オブジェクトには、セレクターのコンテンツをフィルタリングするテキストボックスと、選択内容を保存するためのボタンがあります。

この場合、「ラッパー」を持つように、フォーム オブジェクト全体の div に追加される div にフィルター ボックスとボタンを配置する必要があります。

ただし、動的に作成されたフォーム オブジェクトの div に追加する際に問題が発生しています。

DOM がロードされた後、「ビルダー」クラスが呼び出されます。

window.addEvent('domready', function()
{
builder = new Build();
});

Builder は新しい div をそのまま作成します

var div = document.createElement('div');
var div_id = 'the_div_id_for_my_form_object';

div.setAttribute('id', div_id);

次に、パラメータの 1 つとして div を受け取るフォーム オブジェクトを作成します。

var form_obj = superSelector(div);

form_obj コンストラクター内で、この div はメンバー変数 this.div = div として保存されます。フィルター テキスト ボックスとボタンが作成されます。

ここで問題が発生します。(フィルターのテキストボックスもボタンも問題は同じなので、テキストボックスの場合だけ説明します)

form_obj の div は、フィルター テキスト ボックスのコンストラクターに渡されます。フィルター テキスト ボックスが作成されると、それ自体の div が作成されます。

 var div = document.createElement('div');
 var div_id = 'the_div_id_for_my_filter_box';

この div を form_obj の div に追加しようとすると、「null」に追加しようとしているという js エラーが表示されます

 var filterBox = new Class({
 initialize: function(name, form_obj)
 { 
   this.name = name;

   this.div = document.createElement('div');
   this.div.setAttribute('id', name);

   document.getElementById(form_obj.div).appendChild(this.div);
  }

収量:

「キャッチされていない TypeError: null のメソッド 'appendChild' を呼び出せません」

これを回避する方法がわかりません。追加しようとした時点で、追加したい div が存在しないように感じます。ただし、その時点まで「子」divの構築を延期できるように、イベントがいつ存在するかを通知するイベントを生成する方法がわかりません

4

3 に答える 3

2

右。あなたがするいくつかのことは、ムーツールではありません。

var div = document.createElement('div');
var div_id = 'the_div_id_for_my_form_object';

div.setAttribute('id', div_id);

次のようにする必要があります。

var div = new Element('div', {
    id: 'the_div_id_for_my_form_object'
}); // or even new Element('div#foobar'); 


div.setAttribute('id', div_id); -> div.set('id', div_id);

次に、dom に追加します。

document.getElementById(form_obj.div).appendChild(this.div);

なぜ？あなたは何をしようとしているのですか？要素を取得してメモリ内の div に追加しますか?

document.id(form_obj.div).inject(this.div); 
// if this element exist, it will be moved as a child to the new div, not safe
// you really ought to rewrite to:
var el = document.id(form_obj.div);
el && el.inject(this.div);

この時点では、この div はまだ dom に挿入されていないことに注意してください。

等々。マニュアル/APIを読んでください-いつでもネイティブjsを使用できますが、そのようなものは、物事を修正するライブラリを使用する目的を無効にします。

form-builderちなみに、あなたがしていることをするのは簡単ではありません. 、多かれ少なかれ-入力タイプ、グループ、値によってトリガーされる無限の依存関係（すべてのelタイプ）、あらゆる種類のフォーム要素とカスタムのルック/フィール、バリデーター、デフォルト値、プレースホルダー、カスタムイベント..モデル/コントローラーのような動作、デフォルト値、サーバー側データ / 検証、入力データごとに永続化 (sessionStorage / window.name)

は、Twitter のブートストラップ マークアップと要素を介したバージョニング、ページネーション、および言語をサポートする AMD ビルダー マニフェストと、ハッシュタグを介した単一ページの安らかなアプリで作成されます...基本的に、それは本当に大きなタスクです。

私たちがそれをオープンソース化することを決定した場合 (そしてできることを願っています)、人々が興味を持っている場合、誰が知っていますか? インタラクティブなテスト、サルの調査、クイックフォーム、複雑なフォームなど、何でも作成できます...その拡張性と柔軟性。終わりますように....

于 2012-05-29T21:30:23.413 に答える
1

div自体ではなくgetElementByIdに「form_obj」パラメータを送信してみてください。このエラーは、現在採用されている方法では、DOMでdivが見つからないことを示しているようです。getElementByIdは、ターゲットdivのid属性を文字列として受け取ります。

例えば

document.getElementById(form_obj).appendChild(this.div);
于 2012-05-29T19:13:19.410 に答える
0

getElementById文字列パラメータのみを取ります。null要素への参照をメソッドに渡しているため、返されます 。
を取り除くことをお勧めしますgetElementById。div要素を追加したい へ のすでに持っている参照を使用するだけです。

form_obj.div.appendChild(this.div);

それが役に立てば幸い。

于 2012-05-29T19:30:21.400 に答える