1

JSON を使用して、結果をオブジェクトとして取得することに成功しました。多くの苦労の末、私はそれを機能させることができました。ただし、ベスト プラクティスとして HTML と jQuery を常に分離しておく必要があることを読んだので、ソリューションを「クリーン」にするための助けをいただければ幸いです。

コードのスニペットは、次のリンクにあります。

http://jsfiddle.net/xunZU/

var results = $.map(data.GSP.RES.R, function (result) {
    return {
        title: result.T,
        snippet: result.S,
        url: result.U
    };

}); //var results

$.each(results, function (index, obj) {
    $('#results_holder').append('<h2><a href="' + obj.url + '">' + obj.title + '</a></h2>' + '<p>' + obj.snippet + '</p>');
}); //each
4

4 に答える 4

2

この種のことを頻繁に行う場合、テンプレート ライブラリの使用が非常に役立つことがわかりました。個人的には handlebars.js を使用します。JavaScript からマークアップを簡単に分離できます。

http://handlebarsjs.com/

于 2013-03-27T20:58:50.853 に答える
1

JS を HTML から、CSS を HTML などから分離することは、機能、スタイル、フォームなどを分離する慣行に忠実であるため、良い考えです。

一方で、時々 JavaScript を使用していくつかの要素を作成することに問題はありません。それをクリーンアップするには、次のようにします。

var results = $.map(data.GSP.RES.R, function (result) {
    return {
        title  : result.T,
        snippet: result.S,
        url    : result.U
    };
});

$.each(results, function (index, obj) {
    var h2 = $('<h2 />'),
        a  = $('<a />', {text: obj.title, href: obj.url}),
        p  = $('<p />', {text: obj.snippet});

    $('#results_holder').append( h2.append(a), p );
});

$.eachオブジェクトでも機能するため、実際には必要ありません。次の$.mapこともできます。

$.each(data.GSP.RES.R, function (index, obj) {
    var h2 = $('<h2 />'),
        a  = $('<a />', {text: obj.T, href: obj.U}),
        p  = $('<p />', {text: obj.S});

    $('#results_holder').append( h2.append(a), p );
});
于 2013-03-27T21:05:17.743 に答える
0

確かに、次のように独自の疑似テンプレート エンジンを展開できます: http://jsfiddle.net/joeframbach/xunZU/1/

非表示のテンプレートを追加することにより:

<div id="templates" style="display:none;">
<h2><a></a></h2><p></p>
</div>

<div id="results_holder"></div>

そしてそれを複製します：

var data = [
    {T: 'foo1', S: 'bar1', U: 'bat1'},
    {T: 'foo2', S: 'bar2', U: 'bat2'},
    {T: 'foo3', S: 'bar3', U: 'bat3'},
    {T: 'foo4', S: 'bar4', U: 'bat4'},
    {T: 'foo5', S: 'bar5', U: 'bat5'},
]
var results = $.map(data, function (result) {
    return {
        title: result.T,
        snippet: result.S,
        url: result.U
    };

}); //var results

$.each(results, function (index, obj) {
    var tpl_h2 = $('#templates h2').clone();
    var tpl_p = $('#templates p').clone();
    tpl_h2.find('a').attr('href',obj.url).html(obj.title);
    tpl_p.html(obj.snippet);
    $('#results_holder').append(tpl_h2).append(tpl_p);
}); //each
于 2013-03-27T21:05:09.640 に答える
0

したがって、DOM操作の「クリーンな」ソリューションを探しています。クリーンは相対的な用語です。保守可能なものが欲しいだけだと思います。HTML と Javascript のジャグリングは、同期がずれると面倒になる可能性があります。正解は 1 つではないと思いますが、自分やチームのニーズに合ったものを必ず見つけることができます。

joeframbach が提案したように .clone() を提案するつもりでしたが、要素を個別にコピーするのではなく、DOM 要素全体といくつかのサブクラスを使用します。その場合、基礎となる要素や構造についての知識は必要ありません。

これが彼のフィドルの私のブランチです： http://jsfiddle.net/krets/sESy2/2/

$.each(results, function (index, obj) {
    var tpl = $('#templates').clone();
    tpl.attr('id','unique'+index)
    tpl.find('.linkOne').attr('href',obj.url).html(obj.title);
    tpl.find('.one').html('unique'+index);
    tpl.find('.two').html(obj.snippet);
    tpl.removeClass('hidden')
    $('#results_holder').append(tpl);
}); //each
于 2013-03-27T21:50:18.837 に答える