0

HTMLページに動的に追加された要素にHTMLコントロールを動的に追加/ストーリー化/構築するための推奨される方法はありますか？

基本的に、私は作業中のウィジェットベースのシステムを持っており、ユーザーは表示したいウィジェットを選択します。S / Heは、必要な数のウィジェットを画面に表示できます。また、同じウィジェットを一度に何度も表示することもできます。

そのためのスクリプトは次のようになります。

success: function( widget_shell ) 
{ 

    if( widget_shell.d[0] ) {

        $(".column").empty();

        var i = 0;

        for ( i = 0; i <= widget_shell.d.length - 1; i++ ) {

            var $widget = $("<div class='widget widget_" + widget_shell.d[i].widget_id + "'>").appendTo( $(".column_" + widget_shell.d[i].column_id) );
            $("<div class='widget_header widget_header_" + widget_shell.d[i].widget_id + "'>").appendTo( $widget );
            $("<div class='widget_sub_header widget_sub_header_" + widget_shell.d[i].widget_id + "'>").appendTo( $widget );
            $("<div class='widget_content widget_content_" + widget_shell.d[i].widget_id + "'>").appendTo( $widget );
            $("<div class='widget_footer widget_footer_" + widget_shell.d[i].widget_id + "'>").appendTo( $widget );

        }

.widgetセクションには、ボタンやテキストボックスなどのコントロールが必要です.widget_sub_header。それを行うための推奨される方法は何ですか？ 「それ」のように、さらにHTMLコントロールをに入れる方法.widget_sub_header。 データベース内のコントロールのHTMLを追加しますか？どういうわけか、HTMLコントロールを含む外部ファイルに接続し、それらを追加しますか？または他の方法？

私の2つの主な懸念事項は次のとおりです。

  1. メンテナンスが簡単
  2. サーバーリソースに優しい
4

4 に答える 4

1

このようなものはどうですか？IDを使用してクラスを追加する代わりに、親に実際のIDを追加することをお勧めします。これで、子要素をターゲットにすることができます。

function createWidget( id ) {

  var widget = [
    '<div class="widget">',
      '<div class="widget_header"></div>',
      '<div class="widget_sub_header"></div>',
      '<div class="widget_content"></div>',
      '<div class="widget_footer"></div>',
    '</div>'
  ].join('');

  return $( widget ).attr( 'id', 'widget_'+ id );

}

$.each( widget_shell.d, function( i,v ) {
  $('.column_'+ v.column_id)
    .append( createWidget( v.widget_id ) );
});
于 2012-11-15T10:08:42.833 に答える
1

jquery-ZenCodingは、ネストされたhtml要素を作成する簡単な方法です： https ：//github.com/zodoz/jquery-ZenCoding

例： 

$.zen("div#widget>ul.instrument>(li{piano}+li{guitare}+li{flute})");
于 2012-11-15T10:41:44.353 に答える
0

小さなテンプレートエンジンを追加します。私が頻繁に使用するジョン・レシグによって作られた非常に単純なものがあります：

JohnResigマイクロテンプレート

テンプレートエンジンは、横になっていると非常に便利なので、このようなことをもう一度行う可能性があります。

それが気に入らない場合は、次の場所にあるマイクロテンプレートの優れたリソースをご覧ください。

Microjsテンプレート

于 2012-11-15T10:10:40.020 に答える
0

私は以前、同様のウィジェットシステムで作業していました。

これは私がそれを管理した方法です：

すべてのテンプレート要素を保持する非表示のdivコンテナを用意します。

<div id='widget-templates'>
     <div class='widget1-id' >
           <input type='text' class='ytSearch'/>
           <button id='btnYtSearch'>Search</button> 
     </div>
     <div class='widget2-id'></div>
     ... 
     <!-- etc etc -->
     ...
</div>

テンプレートからウィジェットを作成するために必要なすべてのJavaScriptコードを保持するwidgetFactoryというオブジェクトを使用しました。

var widgetFactory = {
    youtubeSearch: function(data){
         var $generatedWidget = $('#widget-templates > .widget1-id').clone();

         // prepopulate with some data if requested (usually when binding data to an already existing widget)
         // ...            

         // attach events
         // ...

         return $generatedWidget;
    }
}

次に、外部のJavaScriptロジックを使用して、ウィジェットデータ（JSONとして）とウィジェットタイプのみをデータベースに保存します。tbl_widgets（id、name、type）tbl_user_widget（user_id、widget_id、data）

これは私の記憶からのものであり、おそらくはるかに深い解決策があることに注意してください。しかし、それがユーザーのカスタマイズウィジェットシステムに新しいアイデアをもたらすことを願っています。

于 2012-11-15T10:18:15.220 に答える