0

我正在使用 JS/JQUERY 创建一个“填空”客户端应用程序，它将读取从 AJAX 调用检索到的 XML 文件。

XML 内部是一个节点，该节点包含一个带有标签的字符串，这些标签标识字段的去向。

为了尝试改善 UI 体验，我正在使用 div 在网页上格式化此表单的显示，如下所示

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

我想通读字符串并使用控制语句来检查该部分应该在上面提到的那些 div 中的位置。

这是来自文本节点的示例字符串

${Prologue} - 亲爱的 ${Title} ${Surname}。这是来自公司的消息。有人打电话但无法访问，已为 ${ProductName} 进行了新的预约，订单号为 ${VOLNumber}，时间为 ${AppointmentDate}，介于 ${AppointmentSlot} 之间。请确保您可以在您的场所为工程师提供服务。如果不方便，请在预约前一天中午 12:00 之前访问 thecompany.com 或致电 01111 1111 111。请参阅您的订单确认，了解当天会发生什么的详细信息。${尾声}

假设很简单，任何不是 ${Prologue} 或 ${Epilogue} 的东西都会进入“消息” 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>要更新的页面上的 s。

应该就是这样，我认为不需要map()打电话——你以后可能需要打电话来进行替换。

map()根据图像进行编辑——毕竟你不需要。解析字符串，使用 jQuery 选择器找到放置部件的位置，完成。

于 2013-01-25T17:12:12.783 回答
1

由于序言和尾声位于开头和结尾，因此您实际上不需要在模板中包含它们。因此，在您的模板引擎中，替换${prologue}和${epilogue)}with ""，因为您不需要它们（假设您无法控制 xml），并将您的输入元素直接插入到 div 中。

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

如果您正在动态创建 div，您可以在 prologue div 前添加 prologue 输入，并将 epilogue div 和 epilogue 输入附加到容器 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 回答