构建您的第一个Support应用程序-第3部分:创建和插入模板

1. 打开你的iframe.html文件并添加以下内容< >脚本Tag先于其他所有人< >脚本标签:

                  
   
                   
   <脚本id＝“requester-template”类型＝“文本/ x-handlebars-template”><表格><tr><道明>客户:</道明><道明>｛｛的名字｝｝</道明></tr><tr><道明>标签:</道明><道明>｛｛#每一个标签｝｝｛｛这｝｝｛｛/每一个｝｝</道明></tr><tr><道明>添加:</道明><道明>｛｛created_at｝｝</道明></tr><tr><道明>最后的签署在:</道明><道明>｛｛last_login_at｝｝</道明></tr></表格></脚本>
                  

   标记定义了一个由2x4 HTML表组成的模板，用于显示请求者信息。模板包含以下几个车把突出显示的表达式。句柄表达式通常由双花括号内的变量组成。例子:{{名称}}．当应用程序在Zendesk Support亚博中运行时，表达式被JavaScript数据对象提供的值所取代，有时称为上下文．

   模板使用{{#每个}}helper来显示从API接收到的标签数组中的每个标签。

2. 属性将显示标记的表行括起来{{#如果}}辅助(强调):

                  
   
                   
   .．.｛｛#如果标签｝｝<tr><道明>标签:</道明><道明>｛｛#每一个标签｝｝｛｛这｝｝｛｛/每一个｝｝</道明></tr>｛｛/如果｝｝
                  

   如果请求者没有任何标记，则UI中的字段将为空白。为了创建更好的UI体验，你可以用句柄隐藏整行{{#如果}}帮手。只有当请求者有标记时，该行才会出现。的{{#如果……}}如果指定的值为，则Helper将显示所包含的内容真相．任何长度不为零的数组都是真数组。空数组为假数组，因此永远不会呈现表行。

3. 在模型中，数据文本是绿色的，因此应用名为数据对每一个人。(您将在下一步中创建样式。)

                  
   
                   
   <脚本id＝＂requester-template＂类型＝＂文本/ x-handlebars-template＂><表格><tr><道明>客户:</道明><道明类＝“数据”>｛｛的名字｝｝</道明></tr>｛｛#如果标签｝｝<tr><道明>标签:</道明><道明类＝“数据”>｛｛#每一个标签｝｝｛｛这｝｝｛｛/每一个｝｝</道明></tr>｛｛/如果｝｝<tr><道明>添加:</道明><道明类＝“数据”>｛｛created_at｝｝</道明></tr><tr><道明>最后的签署在:</道明><道明类＝“数据”>｛｛last_login_at｝｝</道明></tr></表格>脚本>
                  

4. 打开main.css文件并添加以下样式:

                  
   
                   
   . data｛颜色:# 363；padding-left:6px；｝
                  

   该样式将文本显示为绿色，并在左侧添加了一些填充以将文本与标签分开。

5. 保存iframe.html而且main.css文件。

如果您重新加载应用程序，什么也不会发生，因为您还没有在HTML中插入模板。下一步是插入模板，然后确认插入工作正常。

在应用程序中插入模板

将模板插入到文档中所选的元素中。你决定添加一个< div >标签，用于在运行时插入模板。一次只能插入一个模板，但可以切换到不同的模板。例如，您可以从显示splash页面开始，然后在用户单击按钮后切换到另一个页面。

1. 在iframe.html文件，添加以下内容< div >开场后的标签身体< >标签，但在页脚之前:

                  
   
                   
   <divid＝＂内容＂>div>
                  

2. 在main.js，在自调用函数的resize语句后添加以下函数调用(高亮显示):

                  
   
                   
   （函数（）｛var客户端＝ZAFClient．初始化（）；客户端．调用（“调整”，｛宽度:“100%”，高度:“120 px”｝）；showInfo（）；｝）（）；
                  

3. 添加新的showInfo ()自调用函数之后的函数:

                  
   
                   
   .．.函数showInfo（）｛varrequester_data＝｛“名字”:“简”，“标签”:［“标签1”，标签2的］，“created_at”:“2014年11月20日”，“last_login_at”:“2016年6月27日”｝；var源＝文档．getElementById（“requester-template”）．innerHTML；var模板＝车把．编译（源）；var超文本标记语言＝模板（requester_data）；文档．getElementById（“内容”）．innerHTML＝超文本标记语言；｝
                  

   在函数的第一部分中requester_data对象定义Handlebars模板的值或上下文。稍后您将用实时数据替换硬编码的值。

   第二部分将数据传递给模板并呈现HTML。第一行引用< >脚本中包含模板的标记iframe.html．第二行编译模板。第三行将数据添加到模板并生成最终的HTML。的HTML内容< div >第1步中的标记。

4. 保存两个文件。

5. 在代理界面中的测试票据上，单击刷新应用程序面板中的图标。如果ZCLI服务器尚未启动，请参见测试应用程序的指令。

   如果重新加载应用程序时什么都没有出现，请尝试通过按Shift和浏览器上的重新加载按钮来硬刷新票据界面。
   的值插入requester_data对象，然后吐出最终的HTML，然后应用程序将其设置为HTML内容< div id = "内容" >标记。iframe.html文件。
   

   该应用程序有一些外观问题。文本有点太大，行间距有点太紧。

6. 要修复这些问题，请添加以下样式main.css:

                  
   
                   
   #内容道明｛字体大小:12px；padding-top:2px；｝
                  

7. 保存所有文件，单击重新加载所有应用程序在Ze亚博ndesk Support。

   

为错误消息创建模板

如果应用程序在检索用户数据时遇到问题，您希望用户看到一条错误消息，说明出错的地方。

1. 在iframe.html，在请求者模板后添加以下错误模板:

                  
   
                   
   <脚本id＝＂错误模板＂类型＝＂文本/ x-handlebars-template＂><p>｛｛状态｝｝-｛｛statusText｝｝错误．请在下面的链接报告一个错误．</p>脚本>
                  

   该模板用于显示HTTP状态错误消息，如“404 -未找到”。

2. 在main.js，添加以下函数编译并插入模板iframe.html文件:

                  
   
                   
   函数showError（）｛varerror_data＝｛“状态”:404，“statusText”:“没有找到”｝；var源＝文档．getElementById（“错误模板”）．innerHTML；var模板＝车把．编译（源）；var超文本标记语言＝模板（error_data）；文档．getElementById（“内容”）．innerHTML＝超文本标记语言；｝
                  

3. 从自调用函数中调用函数(高亮显示):

                  
   
                   
   （函数（）｛var客户端＝ZAFClient．初始化（）；客户端．调用（“调整”，｛宽度:“100%”，高度:“120 px”｝）；showInfo（）；showError（）；｝）（）；
                  

4. 要测试它，请注释掉showInfo ();使用双正斜杠，保存两个文件，并在Zendesk支持中重新加载应用程序。亚博

   与请求者模板一样，Handlebars插入您的error_data对象，并生成最终的HTML，然后应用程序将其设置为HTML内容< div id = "内容" >标记。iframe.html文件。
   

5. 在满意两个模板都按预期工作之后，删除两个模板showInfo ();而且showError ();函数在自调用函数中调用。在下一篇教程中，您将在不同的地方调用这些函数。

如果要转到下一个教程，可以让ZCLI服务器继续运行。如果完成了这个会话，可以切换到命令行界面并按Control+C来关闭服务器。