Routeless, targetless, runnable routes

栏目: IT技术 · 发布时间: 4年前

内容简介:Now in beta HCX (HTML Compiler eXtensions) supports routeless, targetless, runnable routes. “What does that mean?”, you might ask. An example shows best:Click on “Show Panel One” and “This is panel one” will show up between the router start and end tags. C

Now in beta HCX (HTML Compiler eXtensions) supports routeless, targetless, runnable routes. “What does that mean?”, you might ask. An example shows best:

<script type="module" src="../hcx-router.js"></script><template id=”panelOne">
  <div>This is panel one.</div>
</template><template id="panelTwo">
  <div>This is panel two.</div>
  <script>alert("You have entered panel two.")</script>
</template><a href="#panelOne">Show Panel One</a>  
<a href="#panelTwo">Show Panel Two</a><hcx-router runnable="true"></hcx-router>

Click on “Show Panel One” and “This is panel one” will show up between the router start and end tags. Clicking on “Show Panel Two” will not only replace the content it will run the script with the alert.

For the above and additional examples in this article see the code in action .

Routing can’t get much simpler than this. Just put an <hcx-router> on your page and any time the # changes, a document element with a matching id will be sought and its contents used to replace the empty space between the start and end tags of the router. And, if you tell the router to make the content runnable, any scripts will also be executed or loaded.

Of course, you can provide a target if you wish by making changes to add a targeted location and configure the router to use it:

<div>
  <div>Dashboard</div>
  <div id="dashboard"></div>
</div><hcx-router target=”#dashboard” runnable=”true”></hcx-router>

And, naturally you can also specify paths to select which router to use:

<a href="#dash1/panelOne">Show Panel One</a>  
<a href="#dash2/panelTwo">Show Panel Two</a>
<div>
  <div>Dashboard One</div>
  <div id="dashOne"></div>
</div><div>
  <div>Dashboard Two</div>
  <div id="dashTwo"></div>
</div><hcx-router path="dash1/:$to" target="#dashOne" runnable="true">
</hcx-router><hcx-router path="dash2/:$to" target="#dashTwo" runnable="true"></hcx-router>

In this case we used a special parameterized path containing :$to to specify the source of the content. The more conventional method used by Vue is also possible if a RegExp is used for the path:

<a href="#dash1/panelOne">Show Panel One</a>  
<a href="#dash2/panelTwo">Show Panel Two</a>
<div>
  <div>Dashboard One</div>
  <div id="dashOne"></div>
</div><div>
  <div>Dashboard Two</div>
  <div id="dashTwo"></div>
</div><hcx-router path="/dash1\/.*/" target="#dashOne" runnable="true" to="#panelOne">
</hcx-router><hcx-router path="/dash2\/.*/" target="#dashTwo" runnable="true" to="#panelTwo"></hcx-router>

Through the use of a less restrictive target CSS selector, it is also possible to target multiple output locations and use multiple routers at the same time!

<a href="#panelOne">Show Panel One</a>  
<a href="#panelTwo">Show Panel Two</a><div>
  <div>Dashboard One</div>
  <div></div>
</div><div>
  <div>Dashboard Two</div>
  <div></div>
</div><hcx-router target=".dashboard"></hcx-router>

Intrigued? Give us a clap and head over to GitHub .


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

火的礼物:人类与计算技术的终极博弈(第4版)

火的礼物:人类与计算技术的终极博弈(第4版)

【美】Baase,Sara(莎拉芭氏) / 郭耀、李琦 / 电子工业出版社 / 89.00

《火的礼物:人类与计算技术的终极博弈 (第4版)》是一本讲解与计算技术相关的社会、法律和伦理问题的综合性读物。《火的礼物:人类与计算技术的终极博弈 (第4版)》以希腊神话中普罗米修斯送给人类的火的礼物作为类比,针对当前IT技术与互联网迅速发展带来的一些社会问题,从法律和道德的角度详细分析了计算机技术对隐私权、言论自由、知识产权与著作权、网络犯罪等方面带来的新的挑战和应对措施,讲解了计算技术对人类的......一起来看看 《火的礼物:人类与计算技术的终极博弈(第4版)》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

在线进制转换器
在线进制转换器

各进制数互转换器

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码