0

サンプルコード 

var jqxhr=$.getJSON("http://search.twitter.com/search.json?callback=?",{q:query},
                function(data) {
                    ... question.               
                });

質問

今、私はこのようなものをツイートの結果ごとに作成する必要があります(たとえば...)

<article class="tweet">
    <header>
        <img class ="tweet_img"src="data.profile_image_url"/> 
    </header>
    <p class="tweet-text">data.text</p> 
</article>

さて、私は各結果をドキュメントに追加するいくつかの方法を知っています:

  1. 大きな HTML 文字列を作成し、JSONPからデータを追加して、これを何らかのコンテナーに追加します。
  2. ap要素、ヘッダー要素を作成します...それらを操作し、その後、最後の要素をコンテナに追加します。

ここで質問です: あなたの経験から、これを行う正しい方法は何ですか?
私は良い原則を使用して正しい方法を意味します。

html について質問しないでください。これはばかげた例です。
ありがとう。

4

5 に答える 5

1

まあ、ベスト プラクティスでは、DOM 要素の innerHTML プロパティを使用しないように指示されます。これは、オプション 1 で行うことです。タグ インジェクション (これがどの程度の問題なのかはわかりません) については、HTML 文字列を作成し、innerHTML を使用して挿入すると、更新がはるかに迅速かつ簡単になります。

于 2012-07-24T04:39:52.717 に答える
0

いくつかのイベント ハンドラーを要素にアタッチする場合は、それらを個別に生成する必要があります。

ただし、イベント ハンドラーをアタッチしたくない場合は、最初の方法をお勧めします

$("body").append('<article class="tweet"><header><img class ="tweet_img" src="'+data.profile_image_url+'"/></header><p class="tweet-text">'+data.text+'</p></article>')
于 2012-07-24T04:36:38.350 に答える
0

私が知っている最もクリーンな方法は、「HTML in JS」の代わりにMustacheのようなテンプレート システムを使用することです。

var template = html_string,                   //HTML from a string or from AJAX
    data = {...data...},                      //structured data
    html = $(Mustache.render(template,data)); //wrap in jQuery to operate

html.appendTo(somewhere_in_DOM);
于 2012-07-24T04:40:18.777 に答える
0

問題の適切な解決策であるHandlebars.jsのようなテンプレート エンジンを使用することをお勧めします。

これには、機能に役立つ可能性のあるより多くの条件付きオプションがある、より多くのオプションがあります。上記のリンクにアクセスするだけで、いくつかのアイデアが得られます。

于 2012-07-24T04:40:27.807 に答える
0

それぞれ独自の利点を持ついくつかの有効なアプローチがあります...

Java コードで HTML を文字列として生成し、それを .innerHTML で追加するだけの手法は、最も高速なアプローチの 1 つであることが知られていますが、HTML の検証はほとんど行われません。

または、DOM メソッドを直接使用して HTML を構築し、タグを作成して追加し、構造を構築することもできます。これは、より多くの検証が行われているという点で一般的に安全ですが、DOM メソッドは非常に冗長で、入力するのが少し面倒です...そして、一度に 1 つずつ属性を追加する必要があるため、コードはさらに冗長になります。良い。

私の個人的な好みは、特に既に JQuery を使用しているため、JQuery を使用してタグとテキスト ノードを作成し、それらを JQuery を使用してまとめることです。過度に冗長になります。

これには、新しいタグを生成する JQuery の方法により、DOM 標準に準拠していない古いブラウザーのサポートが追加されるという利点もあります。ページがこれらの古いブラウザで動作するかどうかを実際に気にする必要がないことを願っていますが、互換性が向上しても問題はありません。

そのアプローチでは、次のように記述します。

var article = $('<article class="tweet"></article>');
var header = $('<header></header>');
var image = $('<img class="tweet_img" src="' + data.profile_image_url + '"></img>');
var tweet = $('<p class="tweet-text">' + data.text + '</p>');

header.append(image);
article.append(header, tweet);
$("#id_of_content_area_to_add_the_tweet_to").append(article);
于 2012-07-24T05:08:15.830 に答える