0

AJAX 呼び出しから取得した XML ファイルを読み込む JS/JQUERY を使用して、「空白を埋める」クライアント側アプリケーションを作成しています。

XML の内部には、フィールドの移動先を識別するタグ付きの文字列を含むノードがあります。

UI エクスペリエンスを改善するために、次のように div を使用して Web ページ上のこのフォームの表示をフォーマットしています。

<div id="prologue"></div>
<div id="message"></div>
<div id="epilogue"></div>

文字列を読み、制御ステートメントを使用して、その部分が上記の div のどこにあるのかを確認したいと思います。

テキスト ノードのサンプル文字列を次に示します。

${Prologue} - ${Title} ${Surname} 様。当社からのメッセージです。${AppointmentSlot} 間の ${AppointmentDate} に、注文番号 ${VOLNumber} で ${ProductName} の新しい予約が行われました。エンジニアのためにあなたの敷地内にいることを確認してください。これが都合が悪い場合は、thecompany.com にアクセスするか、予約の前日の正午までに 01111 1111 111 に電話してください。当日の流れについては、ご注文確認書をご確認ください。${エピローグ}

${Prologue} または ${Epilogue} 以外のものはすべて"message" divに入ります。

ここに疑似コードがあります

for loop through the string
if ${prologue} put inside prologue div tags
if !=$prologue and !=$epilogue then place in message div tag
if ${epilogue} then put inside epilogue div tags

ループで作成する他のルールがいくつかあります。たとえば、「。」の場合です。文字を入力してから改行タグを挿入します

出力は次のようになります

<div id="prologue">
${prologue}
</div>
<div id="message">
Dear ${Title} ${Surname}. <br/>
This is a message from The Company. An person called but was unable to gain access, a new appointment has been made for ${ProductName} with order number ${VOLNumber}, on ${AppointmentDate} between ${AppointmentSlot}. <br/>

Please ensure you are available at your premises for the engineer. If this is not convenient, go to thecompany.com or call 01111 1111 111 before 12:00 noon the day before your appointment. Please refer to your order confirmation for details on what will happen on the day. <br/>

</div>
<div id="epilogue">
${epilogue}
</div>

この実装に使用できるjavascriptまたはjqueryの機能を誰かが特定できますか? .map() jquery 関数を使用することを考えていましたが、これが私の状況で機能するかどうかはわかりません。

完全なコード ソリューションはありません。ティーザーだけなので、自分で理解できます！

編集

これは、フォーマットされていないディスプレイのスクリーンショットです

ここに画像の説明を入力

ありがとう

4

3 に答える 3

1

fyneworks.com/jquery/xml-to-json/#tab-Download と Mustache.js の使用

ほとんどの場合、大規模なコミュニティでモジュールを使用することは、車輪を再発明するよりも優れています..

<script id="template" type="text/template">
    <div id="prologue">{{{prologue}}}</div>
    <div id="message">
        Dear {{Title}} {{Surname}}. <br/>
        This is a message from The Company. An person called but was unable to gain access, a new appointment has been made for {{ProductName}} with order number {{VOLNumber}}, on {{AppointmentDate}} between {{AppointmentSlot}}. <br/>

        Please ensure you are available at your premises for the engineer. If this is not convenient, go to thecompany.com or call 01111 1111 111 before 12:00 noon the day before your appointment. Please refer to your order confirmation for details on what will happen on the day. <br/>

    </div>
    <div id="epilogue">{{{epilogue}}}</div>
</script>

$.get(YOUR_XML, function(data) {
    var json = $.xml2json(data);
    var template = $('#template').html();
    var html = Mustache.to_html(template, json);
    $(YOUR_TARGET_ELEM).html(html);
});
于 2013-01-25T17:06:31.203 に答える
1

これを行うには、(必要なものを抽出するために) 文字列操作を使用する必要があります。標準の JavaScript 正規表現が必要です。

また、jQueryセレクター<div>を使用して、更新するページ上のを見つける必要があります。

それはそれについてのはずです、map()電話の必要はないと思います-後で交換のために電話が必要になるかもしれません.

画像に基づいて編集 --map()結局必要ありません。文字列を解析し、jQuery セレクターを使用してパーツを配置する場所を見つけます。

于 2013-01-25T17:12:12.783 に答える
1

プロローグとエピローグは最初と最後にあるため、テンプレートに含める必要はありません。したがって、テンプレート エンジンでは、 and を不要なので (xml を制御できないと仮定して) に置き換え${prologue}、${epilogue)}入力""要素を div に直接挿入します。

$('#prologue').append('<input type="text" id="prologueText"/>');
$('#epilogue').append('<input type="text" id="epilogueText"/>');

div を動的に作成する場合は、プロローグ div の先頭にプロローグ入力を追加し、エピローグ div とエピローグ入力をコンテナー div に追加できます。あなたは特定の情報を欲しがっていなかったので、そこでやめます。

したがって、出力は次のようになります。

<div id="prologue">
<input type="text" id="prologueText"/>
</div>
<div id="message">
Dear ${Title} ${Surname}. <br/>
This is a message from The Company. An person called but was unable to gain access, a new appointment has been made for ${ProductName} with order number ${VOLNumber}, on ${AppointmentDate} between ${AppointmentSlot}. <br/>

Please ensure you are available at your premises for the engineer. If this is not convenient, go to thecompany.com or call 01111 1111 111 before 12:00 noon the day before your appointment. Please refer to your order confirmation for details on what will happen on the day. <br/>

</div>
<div id="epilogue">
<input type="text" id="epilogueText"/>
</div>
于 2013-01-25T17:15:54.437 に答える