2

私はJavascriptとJqueryが初めてです。

getリクエストを送信し、返されたJson文字列を処理し、htmlに.html()コンテンツを表示するために使用するためにJquery $.ajaxを使用しています。<div id="myTabs"></div>以下のコードからわかるように、String 変数を使用して HTML リストを作成しています。私は良い習慣でこれをやっていますか？この方法はあまり機敏ではないと感じています。これを行うより良い方法はありますか?

ありがとう！

function updateRelated(str)
{
    $.ajax(
        {
            url:ServerUrl+api_subject,
            type:'GET',
            success:function(json)
            {
                // alert(json);
                var obj = jQuery.parseJSON(json);

                var toDisplay="";
                var tableDisplay="<ul>";
                for(var i=0;i<obj.subject_list.length;i++)
                {
                    tableDisplay=tableDisplay+'<li><a href="subject.htm?subjectid='+obj.subject_list[i].id+'">'+obj.subject_list[i].title+'</li>';
                    //    toDisplay=toDisplay+"<br>preferred_synonym:"+obj.relatedCocepts[i].preferred_synonym+",Type: "+obj.relatedCocepts[i].type+",score: "+obj.relatedCocepts[i].score;
                }
                tableDisplay=tableDisplay+"</ul>"
                $("#myTabs").html(tableDisplay);
            }
        }
        )
 }
4

6 に答える 6

1

基本的に、私はあなたの質問を読んで、マークアップの文字列を書いて変数を連結してdomに出力するべきかどうかを本当に尋ねています。

小さいものであれば問題ありませんが、javascript を使用して多数のビューを作成している場合は、ビューのパーシャルをまとめるツールが必要になります。

これを行うツールがあります：

于 2012-08-08T22:32:01.927 に答える
1

jsViewsのようなテンプレート エンジンを使用することもできます。jQuery で要素をループして作成することに固執する場合は、http ://www.andyjarrett.co.uk/blog/index.cfm/2009/3/14/Creating-a-new-DOM-element- をご覧ください。 with-jQuery/ - 構文は簡単です:

div = $("<div>"); // then append more stuff with append() or html()

しかし繰り返しますが、大量のものを追加する場合は、テンプレート エンジンを使用する方が自作のループ ソリューションよりもはるかに優れています。また、より堅牢で拡張性があります (また、レイアウトの変更を簡単に実装できます)。

于 2012-08-08T22:33:17.657 に答える
1

他の人がすでに言ったように、たくさんの html がある場合は、テンプレート エンジンが最適です。ただし、配列を使用して現在のコードをきれいにすることができます。私はいくつかのことをコメントしました：

var list = [],
    arr = obj.subject_list,
    len = arr.length; // cache length for better performance

for (var i=0; i<len; i++) {
  list.push(
    '<li>'+
      '<a href="subject.htm?subjectid='+ arr[i].id +'">'+
        arr[i].title +
      '</a>'+ // you forgot to close <a>
    '</li>'
  );
}

$("#mytabs").html('<ul>'+ list.join('') +'</ul>');

JavaScript で html を扱う場合、実際の html と同じように html を適切にインデントすることをお勧めします。ご覧のとおり、はるかに読みやすくなり、終了の欠落などの構文エラーを回避できます</a>。

于 2012-08-08T22:36:29.377 に答える
0

私はあなたがここで素晴らしい仕事をしていると信じています、この場合私はおそらく非常に似たようなことをするでしょう。特別なプラグインを使用することは可能であり、おそらくよりユーザーフレンドリーですが、ほとんどの場合、多くのオーバーヘッドが伴います。プロセッサの負荷の観点から、これをより効率的に行うことができるとは思えません。

于 2012-08-08T22:39:45.630 に答える
-1

jQuery Templatesもご覧ください。それはまだベータ版であり、それ以上のことはありませんが、あなたの状況では問題ないはずです.

于 2012-08-08T22:32:10.710 に答える