构建你的第一个Sell应用程序-第3部分:创建和插入模板
本教程是构建Zendesk Sell应用程序系列的一部分:亚博
- 添加模板引擎<李data-garden-id="typography.ordered_list_item" data-garden-version="8.39.0" class="sc-jNnpgg sc-iNiQyp jHhdID eLzCct">创建模板以显示组织信息<李data-garden-id="typography.ordered_list_item" data-garden-version="8.39.0" class="sc-jNnpgg sc-iNiQyp jHhdID eLzCct">在应用程序中插入模板<李data-garden-id="typography.ordered_list_item" data-garden-version="8.39.0" class="sc-jNnpgg sc-iNiQyp jHhdID eLzCct">为错误消息创建模板
添加模板引擎
< >脚本标签iframe.html之前的< >脚本引用您的main.js文件:
<脚本src＝＂https://cdn.jsdelivr.net/npm/<一个href＝＂https://developer.zendesk.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="274f4649434b4245465554671309100910">(电子邮件保护)/dist / handlebars.min.js＂>脚本>
创建模板以显示组织信息
< >脚本标签。在iframe.html，添加如下组织模板
< >脚本在其他人之前标记< >脚本标签:<脚本id＝＂org-template＂类型＝＂文本/ x-handlebars-template＂><h2>新线索为｛｛orgName｝｝</h2><ul>｛｛#每一个领导｝｝<李><一个href＝“{{url}}”目标＝“平等”>｛｛名字｝｝</一个></李>｛｛/每一个｝｝</ul>脚本>这个模板包含几个<一个href＝＂http://handlebarsjs.com/">车把表达式。句柄表达式通常由双花括号内的变量组成。例如:
{{名称}}．当它运行时，应用程序将这些表达式替换为来自Javascript数据对象的值。对于组织模板，该对象应该包含:- 机构名称(
{{orgName}}）<李data-garden-id="typography.unordered_list_item" data-garden-version="8.39.0" class="sc-jNnpgg sc-jffHpj jHhdID gpoyWd">一系列新线索({{领先}})。数组中的每一项都是一个对象。数组中的每个对象都应该包含:- 的URL。引领导语页(
{{url}}）<李data-garden-id="typography.unordered_list_item" data-garden-version="8.39.0" class="sc-jNnpgg sc-jffHpj jHhdID gpoyWd">负责人的全名({{名称}}）{{#每个}}助手为leads数组中的每个leads添加列表项。<李data-garden-id="typography.ordered_list_item" data-garden-version="8.39.0" class="sc-jNnpgg sc-iNiQyp jHhdID eLzCct">附上的
< h2 >而且< ul >标签{{#如果}},{{其他}}助手(强调):<脚本id＝“org-template”类型＝“文本/ x-handlebars-template”>｛｛＃如果领导｝｝<h2>新领导为｛｛orgName｝｝</h2><ul>｛｛＃每一个领导｝｝<李><一个href＝“{{url}}”目标＝“平等”>｛｛名字｝｝</一个></李>｛｛/每一个｝｝</ul>｛｛其他的｝｝<h2>没有新领导发现为｛｛orgName｝｝．</h2>｛｛/如果｝｝</脚本>如果一个组织没有任何新的潜在客户，UI中的列表将为空白。为了创造更好的用户体验
<李data-garden-id="typography.ordered_list_item" data-garden-version="8.39.0" class="sc-jNnpgg sc-iNiQyp jHhdID eLzCct">{{#如果}},{{其他}}如果该组织没有新线索，帮助程序将隐藏列表并显示替代标题。保存iframe.html．
- 机构名称(
如果你刷新应用，它不会改变。您还没有在HTML中插入模板。下一步是插入模板并确认其工作正常。
< div >标签，用于在运行时插入模板。一次只能插入一个模板，但可以切换到不同的模板。例如，您可以从显示splash页面开始，然后在用户单击按钮后切换到另一个页面。在iframe.html，删除以下标签:
<h2>新领导为该组织h2><ul><李><一个href＝＂＂目标＝＂平等自愿＂>引领一个一个>李><李><一个href＝＂＂目标＝＂平等自愿＂>引领两个一个>李>ul>将已删除的标签替换为以下内容:
<divid＝＂内容＂>div>在main.js，添加以下内容
displayLeads ()函数调用(高亮显示)到自调用函数:（函数（）｛常量客户端＝ZAFClient．初始化（）；客户端．调用（“调整”，｛宽度：“100%”，高度：“150 px”｝）；displayLeads（）；｝）（）；添加
displayLeads ()自调用函数后的函数定义:函数displayLeads（）｛常量orgData＝｛orgName：“XYZ Widget公司。”，领导：［｛“名称”：“爱丽丝阿拉贡”，“url”：“https://app.futuresimple.com/leads/2104416001”｝，｛“名称”：“鲍勃·巴金斯”，“url”：“https://app.futuresimple.com/leads/2104416001”｝，］｝；renderTemplate（“org-template”，orgData，“内容”）；｝在函数的第一部分中orgData对象定义了传递给Handlebars模板的硬编码值。稍后将使用来自API的实时数据替换这些值。
renderTemplate ()函数。这个函数将数据传递给模板，并将模板呈现为HTML。它需要三个参数:- 的ID。
< >脚本标签iframe.html包含模板(“org-template”）<李data-garden-id="typography.unordered_list_item" data-garden-version="8.39.0" class="sc-jNnpgg sc-jffHpj jHhdID gpoyWd">传递给模板的数据对象(orgData）<李data-garden-id="typography.unordered_list_item" data-garden-version="8.39.0" class="sc-jNnpgg sc-jffHpj jHhdID gpoyWd">标签的IDiframe.html将包含呈现的HTML (“内容”）<李data-garden-id="typography.ordered_list_item" data-garden-version="8.39.0" class="sc-jNnpgg sc-iNiQyp jHhdID eLzCct">添加
renderTemplate ()函数定义后直接displayLeads ()函数定义:函数renderTemplate（templateId，dataObject，divId）｛常量源＝文档．getElementById（templateId）．innerHTML；常量模板＝车把．编译（源）；常量compiledHtml＝模板（dataObject）；文档．getElementById（divId）．innerHTML＝compiledHtml；｝保存iframe.html而且main.js．要查看更改，请单击刷新图标。
< div id = "内容" >标记。iframe.html文件:
- 的ID。
为错误消息创建模板
在iframe.html，将以下错误模板添加到
org-template脚本标签:<脚本id＝＂错误模板＂类型＝＂文本/ x-handlebars-template＂><p>｛｛状态｝｝-｛｛statusText｝｝错误．请在下面的链接报告错误．</p>脚本>该模板将显示一个HTTP状态错误消息，例如“404 - Not found error”。
<李data-garden-id="typography.ordered_list_item" data-garden-version="8.39.0" class="sc-jNnpgg sc-iNiQyp jHhdID eLzCct">在main.js，添加以下函数渲染模板:
函数displayError（）｛常量errorData＝｛“状态”：404，“statusText”：“没有找到”｝；renderTemplate（“错误模板”，errorData，“内容”）；｝调用
displayError ()函数(高亮显示)从您的自调用函数:（函数（）｛常量客户端＝ZAFClient．初始化（）；客户端．调用（“调整”，｛宽度：“100%”，高度：“150 px”｝）；displayLeads（）；displayError（）；｝）（）；要测试它，请注释掉
displayLeads ();使用双正斜杠，保存main.js而且iframe.html，然后刷新应用程序。< div id = "内容" >标签iframe.html．
如果要转到下一个教程，可以让ZCLI服务器继续运行。如果完成了这个会话，可以切换到命令行界面并按Ctrl+C来关闭服务器。