如何使用js当选中老师时是工号,当选中学生时是学号

来源：蜘蛛抓取(WebSpider) 时间：2018-03-18 12:56 标签： 全国物理竞赛2018官网 
 

 两种都可以直接绑定click，根据class来判断，但首先是看你实际需求来用元素。
 
 

 需要原生JS参考代码再追。

handlebars表达式以{{开头，中间写一些内容，以}}结尾。

    注释不会出现在输出结果里，如果想要显示出来，可以使用html的注释（会被执行，然后以注释的形式显示，所以如果html注释内有错，还是会报错）

    1. {{! 这个注释不会显示在输出结果中 }}

    所有注释必须包含结束标签}}，多行注释可以使用{{!-- --}}

   var result = func(data); 这个函数带有一个参数，该参数为用以匹配模板用的数据。我这里事先写死一个数据对象data，然后传入该函数内。返回值是匹配好的html内容，打印出来就是 ：

  最后再附上一篇关于Handlebars语法比较详细的介绍：

$pile()方法进行预编译,该方法传入的参数即为获取到的模板

  • 步骤三: 使用template()方法进行编译后得到拼接好的字符串,该方法传入的参数即为上一步预编译的模板.
  • 步骤四: 将编译好的字符串插入到你所希望插入到的html文档中的位置,这里使用的是jQuery给我们提供的html()方法.同样,你也可以使用原生的innerHTML

    • 以下面的慢慢买网站为例,该项目中的手机列表,是通过Ajax动态获取的,我们不可能在html文档中写入全部的手机列表代码,这是不可能的.所以我们需要通过Handlebars来帮我们将后台传递过来的数据动态的显示到html文档中.




    著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

    handlebars是前端数据模板，在此介绍handlebars主要指令，以及与jquery整合的开发流程。

    handlebars中的指令与数据变量，都以两个大括号（即{{和}}）包围，指令以#开始，以/结尾。

    可遍历对象和数组，遍历中或获取的数据有：

    b)@key ,遍历过程中，当前元素的名称（或数组元素的索引）

    c)this ,遍历过程中，当前元素的值；

    为模板的一块区域定义上下文

    each的index变量比较常用，但是它是从0开始的，往往不符合业务中的需求，这里写个helper来扩展一下。

    上面说到if不支持复杂的表达式，如果是“&&”操作还可以用子表达式来实现，更加复杂的就不好办了，这里我写了一个helper来实现。

    先将整个逻辑表达式作为一个字符串传入，然后替换其中的变量值，最后用eval函数来解析表达式，同时增加异常处理。

    比较推崇使用分页来实现组件化。分页跟helper一样需要先注册。在hbs模块中可以批量注册，比较简单。

    用“>”来引用模板，这种情况一般用来处理页头页尾这种简单的分页。后面可以传入参数。 { {> myPartial param} }

    当使用块级表达式时，我们通常添加“#”，而分页是“>”，所以块级分页使用“#>”，这里表示如果layout分页不存在则显示块内的内容My Content。

    当然也可以用表达式来代替分页名称

    当分页中一部分代码是固定的，另一部分是变化的时候，可以在分页中添加“”，这时当引用这个分页时，在内部编写代码将会填充到这个位置。

    当有多段代码需要填充到分页时,可以用如下方法。分页中内嵌分页变量，模板中通过内联分页的方式传入。

    本文列举的只是handlebars中最重要和常用的功能，更多细碎的功能可以去查看 。

    我想将导航条写成一个分页(partial)，导航条左边的文字标题是可以通过参数传递的，但是右边的内容可能是文字、图片其它元素，需要具体业务自定义实现。我又不想把html代码写在js中，所以希望在模板中将这段未知的模板代码填充到分页中进行展现。我在官网文档中找到了 {{>}}来实现此功能，但是本机实验一直解析报错。 解决过程： 这个问题原因可能有两个，一是官方文档有错，二是本机环境的插件有问题（Express用hbs模块，该模块封装了handlebars引擎模块）。为了验证官方文档的正确性，我找到了一个在线handlebars解析器，输入文档中的代码时可以正确解析，那么只可能出现在hbs模块了。这时在github上找到hbs模块最新版本为4，查看本地版本为3，更新后果然可以正常解析了。

    handlebars让我们看到一个好的插件应该有的特征：

    • 可识别性。接口简单，使用方便，容易上手。
    • 高可用性。自带常用一些功能（helper），不求多而求精。
    • 可扩展性。复杂的业务逻辑，开发人员可以自定义helper去扩展和实现。

    作者：亚里士朱德 博客：

    我要回帖

    更多关于 全国物理竞赛2018官网 的文章

     

    随机推荐