1

Salesforce の jQuery Mobile の例の 1 つでは、アプリのこのページで ID の FirstName、LastName、および Email が再利用されています。

<div data-role="page" data-theme="b" id="detailpage">
    <div data-role="header">
    <a href='#mainpage' id="back" class='ui-btn-left' data-icon='arrow-l'>Back</a>
       <h1>Contact Detail</h1>
    </div>
    <div data-role="content">
        <table>
            <tr><td>First Name:</td><td id="FirstName"></td></tr>
            <tr><td>Last Name:</td><td id="LastName"></td></tr>
            <tr><td>Email:</td><td id="Email"></td></tr>
        </table>
        <form name="detail" id="detail">
            <input type="hidden" name="Id" id="Id" />
            <button data-role="button" id="editbtn">Edit</button>
            <button data-role="button" id="deletebtn" data-icon="delete" 
              data-theme="e">Delete</button>
        </form>
    </div>
    <div data-role="footer">
        <h4>Force.com</h4>
    </div>
</div>
<div data-role="page" data-theme="b" id="editpage">
    <div data-role="header">
    <a href='#mainpage' id="back" class='ui-btn-left' data-icon='arrow-l'>Back</a>
        <h1 id="formheader">New Contact</h1>
    </div>
    <div data-role="content">
        <form name="contact" id="form">
            <input type="hidden" name="Id" id="Id" />
            <table>
                <tr><td>First Name:</td><td ><input name="FirstName" id="FirstName" 
                  data-theme="c"/></td></tr>
                <tr><td>Last Name:</td><td ><input name="LastName" id="LastName" 
                      data-theme="c"/></td></tr>
                <tr>
                    <td>Email:</td>
                    <td><input name="Email" id="Email" 
                      data-theme="c"/></td>
                </tr>
            </table>
            <button data-role="button" id="actionbtn">Action</button>
        </form>
    </div>

同じ ID を複数回使用するのは無効な HTML であることはわかっています。これは 1 つの HTML ドキュメントですが、複数ページのテンプレート内では、<div data-role="page">技術的にはそれぞれが個別のページです。

だから私の質問は:これは適切なアプローチですか? そうでない場合、冗長なコードなしでIDの再利用を避ける最もエレガントな方法は何ですか? この場合、ページごとに個別のイベント ハンドラーを指定せずに、現在のページに応じてテーブル要素を選択できるように、同じ id を使用すると便利だと思います (ただし、単にコピー アンド ペーストのミスである可能性があります)。

編集:クラスを使用することが明確な解決策であることを認識しているので、質問の一部は次のとおりだと思います:たとえば、現在のdiv/ページでFirstnameクラスのみを選択する方法は? おそらく、「これは有効な HTML ですか?」という質問です。当たり前のように思えるかもしれませんが、私がこの質問をした理由は、それが Salesforce の例にあるとすれば、何かが欠けているのではないかと思ったからです。

EDIT 2 : このリンクhttp://forum.jquery.com/topic/using-ids-in-jquery-mobile-pagesを見つけて、この問題に関する適切な議論を行いました。

4

4 に答える 4

2

まず第一にHTML、jQuery Mobile を使用するときに有効であることについて学んだことを偽造してください。基本的なレベルでは、jQuery Mobile は通常の Web 開発とは少し異なることを覚えておく必要があります。複数ページのテンプレートが使用されている場合、複数のページDOMを保持できます。一意の ID を強制しても意味がありません。

jQuery Mobile で ID を操作するときの実際のルールは 1 つだけで、ページMUSTには一意の ID があり (さらに、番号で開始したり、番号だけにすることはできません)、他のすべての ID は重複する可能性があり、場合によってはそれが前提条件となります。たとえば、従来の jQuery Mobile ボタン スタイル (またはその他のウィジェット) をオーバーライドする場合は、すべてのカスタム ボタンで同じ ID を使用する必要があります。カスタム ボタンに id を使用!importantする場合、クラシックCSSスタイルをオーバーライドするために id を使用する必要はありません。

最後の質問について。現在アクティブなページで見つかった ID のみにアクセスできます。この jQuery Mobile セレクターを使用すると、簡単に実行できます。

$.mobile.activePage

たとえば、次のコード:

$(document).on('pagebeforeshow', function() {
    alert($.mobile.activePage.attr('id'));
});​

現在アクティブなページの ID が表示されます。基本的には、現在アクティブなページ div のセレクターです。たとえば、関数findを使用して内部ページのコンテンツにアクセスできます。

しかし、キャッチがあります。これは、pagebeforeshow、pageshow、pagebeforehide、および pagehide ページ イベント中にのみ使用できます。残念ながら、あなたが jQuery Mobile をどれだけ理解しているかはわかりません。ページ イベントが何かわからない場合は、このARTICLEを参照してください。

于 2013-07-25T22:07:48.840 に答える
2

有効な HTML ではありません。 validator.w3.orgは「Duplicate ID FirstName」というエラーを出し、他のものにも同様のエラーを出します。とは言っても、最新のブラウザーのほとんどは、無効な HTML が与えられた場合、合理的なことをしようとします。

于 2013-07-25T20:58:41.147 に答える
0

すべての要素の id 属性は、特定のページで一意であるだけでなく、サイト内のページ全体で一意である必要があります。これは、jQuery Mobile の単一ページ ナビゲーション モデルにより、多数の異なる「ページ」を同時に DOM に存在させることができるためです。これは、テンプレートのすべての「ページ」が一度に読み込まれるため、複数ページのテンプレートを使用する場合にも当てはまります。

参照: http://demos.jquerymobile.com/1.4.4/pages/

于 2014-10-09T10:47:17.273 に答える
0

いいえ、有効ではありません。最も洗練された解決策は、代わりに class 属性を使用することです。

于 2013-07-25T20:59:14.280 に答える