2

次のような多くのメッセージと、javascript コードにハードコーディングした生の HTML があります。

    var subjectId = $(subject).attr('subjectId'); 
    var subjectName = $(subject).attr('subjectName'); 
    var html = "<table id='invitations' class='invitations' width='100%'><tbody>";
    $(subject).find('group').each( function() {     
        var groupId = $(this).attr('groupId');
        var groupName = $(this).attr('groupName');
        var ownerId = $(this).attr('ownerId');
        var owner = findStudentNameById( subjectId, ownerId );
        html += "<tr>" +
                    "<td width='55px'><img src='images/gplg.png' /></td>" +
                    "<td>" + subjectId + " <span class='subjectName'>" + subjectName + '</span> <br /> '  + groupId + 
                    " - <span class='group'>" + groupName + "</span><br /> Created By "  + owner + "</td>" +
                "</tr>" +
                "<tr>" +
                    "<td width='55px'></td>" +
                    "<td><img class='accept' src='images/accept.png' />" +
                        "<img class='decline' src='images/decline.png' /> " +
                    "</td>" +
                "</tr>";                    
    });
    html += "</tbody></table>";
    return html;

また ...

$('#inviteform').submit( function (){
            var invitesSent = false;
            var html = '<h3>Invitations have been sent to the following people</h3><br /><ul>';
            $('#inviteform').find('input:checkbox').each( function() {
                if ( $(this).is(':checked')){
                    html += '<li>+ <a href="#">' + $(this).val() +'</a></li>';
                    invitesSent = true;
                }
            });
            html += '</ul>';

            if ( !invitesSent ){
                html = '<h3>You did not select any invitees, no invitations have been sent.</h3>';
            }

            $('#content').hide().fadeOut(2000);
            $('#content').html(html).slideDown("slow");
            $('#slogan').html('Congratulations! Your group is now complete. ').fadeIn(2000);

            return false;
        });

これは、ページの 2 つのメイン領域 (つまり、タイトル div とコンテンツ div) があり、その内容をその場で変更する必要があるためです。残念ながら、このコンテンツを別のファイルに分けることはできません。

それで、多くのものをハードコーディングする代わりに、これらの div のテキストと DOM 要素を作成することの背後にあるベストプラクティスはありますか?

最もエレガントなソリューションを探しているので、ハードコーディングはあまりありません。

ありがとう

4

7 に答える 7

2

テンプレート ライブラリを確認する必要があります。jQuery テンプレート エンジン

于 2009-05-28T10:21:09.660 に答える
2

HTML 文字列をハードコードすることを奨励する方法は、jQuery で私の嫌いな点の 1 つです。

私は通常、標準の Javascript を使用して終了します。document.createElement('TD')

同じタイプのノードをたくさん作成している場合は、それらをキャッシュしcloneNode(true)て新しいノードを作成するために使用するのが最善/高速です。

var nodeCache;
    nodeCache.td = document.createElement('TD')

var newTD = nodeCache.td.cloneNode(true);

これがjQueryをあまり利用していないことは理解していますが、jQueryのこれを処理する方法は洗練されていないと思います。

于 2009-05-28T10:28:35.823 に答える
1

jQuery のセレクターを使用して DOM 要素を作成できます。例えば、

$('<table>')

属性を設定してDOMに追加できるテーブル要素を作成します。

$('<table id="invitations" class="invitations" width="100%">')
    .append('<tbody>')
    .appendTo(selector);
    // etc
于 2009-05-28T10:14:20.733 に答える
1

1 つの代替方法は、append()、addClass()、css()、attrib() およびその他の jQuery メソッドを使用して DOM を構築することです。チェーン化すると、コードがよりエレガントになります。これは、特に小さな DOM ツリーの場合にうまく機能します。

より大きな DOM ツリーが必要な場合は、AJAX メソッドを使用してサーバーから取得することをお勧めします。動的に生成されたデータを渡すために、コードを調整する必要があります。

また、html および JavaScript コードの再設計を検討することもできます。たとえば、DOM ツリーを html に配置して非表示にすることができます (CSS または JavaScript を使用)。次に、動的に生成されたデータを追加した後に表示できます。これは、関心の分離の観点からははるかに優れています。

于 2009-05-28T10:22:23.603 に答える
0

あなたの場合、メッセージをマークアップから分離します。次のように、ページに空のhtmlスキャフォールドを含めることができます

...<div id="feedback" style="display:none;"><h3 class="headline"></h3><p class="message"></p>...

後でjQueryを使用してデータを入力します。このようにして、すべてのユーザー メッセージを外部の .js ファイルにリファクタリングして、i18n を大幅に容易にすることができます。

ところで、JQuery テンプレート エンジンはお勧めできません。非常に厄介な構文 (jTemplates など) を使用するように強制されるか、単純な要素の複製に制限されます。IMHO ほとんどの場合、.clone() メソッドを使用する方が良いでしょう。

于 2009-05-28T13:37:29.123 に答える
0

ajax経由でhtmlを取得してみてください。

これにより、javascript と html が分離され、依存関係が解消されます。

于 2009-05-28T10:43:30.643 に答える
0

Ajax を使用してユーザー コントロールを呼び出す方がよいでしょう。

そうすれば、HTML ユーザー コントロールですべてのマークアップを実行できます。

私の愚見で。

于 2009-05-28T10:45:32.700 に答える