skatejs-template-html

skatejs-template-html

Skate HTML Templates

Skate HTML templates is a simple templating engine based on how the Shadow DOM spec uses the <content> element and select attribute.

It works by defining a template:

var myTemplate = skateTemplateHtml('<article><h3><content select=".heading"></content></h3><section><content><p>There is no content to display.</p></content></section></article>');

The compiled template is just a function that you call on an element. If you called the template above on the body:

myTemplate(document.body);

The result would be:

<body>
  <article>
    <h3></h3>
    <section>There is no content to display.</section>
  </article>
</body>

If this already existed in the body:

<body>
  <span class="heading">My Heading</span>
  <p>First paragraph.</p>
  <p>Second paragraph.</p>
</body>

Then it would have been transformed into:

<body>
  <article>
    <h3><span class="heading">My Heading</span></h3>
    <section>
      <p>First paragraph.</p>
      <p>Second paragraph.</p>
    </section>
  </article>
</body>

If you want the templating engine to dynamically project elements into <content> areas, you must first wrap the element:

var $body = skateTemplateHtml.wrap(document.body);

Once wrapped, you work with the wrapper just like a normal element. For example, if you wanted to add a third paragraph, all you'd need to do is:

var thirdParagraph = document.createElement('p');
thirdParagraph.textContent = 'Third paragraph.';
$body.appendChild(thirdParagraph);

Doing that would result in:

<body>
  <article>
    <h3><span class="heading">My Heading</span></h3>
    <section>
      <p>First paragraph.</p>
      <p>Second paragraph.</p>
      <p>Third paragraph.</p>
    </section>
  </article>
</body>

Notice how the when you appended the content, it didn't actually put it as a first child to the body, it actually moved it into the correct content area in the correct spot.

You could have achieved the same thing doing:

$body.innerHTML += '<p>Third paragraph.</p>';

Additionally, if all paragraphs were removed from the <section>:

$body.removeChild($body.childNodes[2]);
$body.removeChild($body.childNodes[1]);
$body.removeChild($body.childNodes[0]);

Then the default content that we specified in the template definition would take their place:

<body>
  <article>
    <h3>
      <span class="heading">My Heading</span>
    </h3>
    <section>
      <p>There is no content to display.</p>
    </section>
  </article>
</body>

If you decide you want to put some content back in, then it will remove the default content in favour of the content you specify.

The properties and methods that are wrapped to give you this behaviour are:

  1. childNodes
  2. firstChild
  3. innerHTML
  4. lastChild
  5. outerHTML
  6. textContent
  7. appendChild()
  8. insertAdjacentHTML()
  9. insertBefore()
  10. removeChild()
  11. replaceChild()

The following properties and methods are not wrapped (but are planned to be):

  1. elements
  2. getElementsByClassName()
  3. getElementsByTagName()
  4. getElementsByTagNameNS()
  5. querySelector()
  6. querySelectorAll()

Additionally, descendants are not wrapped (but are planned to be). This means the following members on descendants behave as they normally would:

  1. nextSibling
  2. parentElement
  3. parentNode
  4. previousSibling

The wrapped elements may look and act like normal elements (including instanceof checks), but due to browser API limitations, you cannot pass it off to other DOM methods as an element.

License

The MIT License (MIT)

Copyright (c) 2014

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Repository

https://github.com/skatejs/template-html


上一篇:Git 实战手册
下一篇:skatejs

相关推荐

  • (HTML)下载PDF文件,而不是在浏览器中单击时打开它们。

    MikeD404Error提出了一个问题:(HTML) Download a PDF file instead of opening them in browser when clicked,或许与您...

    3 年前
  • 面试必备! HTML常见面试题汇总

    基本按所有面经出现的频率来进行汇总 一、 script标签为什么要放在body标签的底部,【defer async】 因为浏览器在渲染html的时候,从上到下依次执行,遇到js文件就会停止当前页面的渲...

    4 个月前
  • 需要:在Android平板上开发HTML / JavaScript的离线IDE(关闭)

    Kees C. Bakker提出了一个问题:Wanted: offline IDE for developing Html / JavaScript on Android tablet [closed...

    3 年前
  • 零基础小白前端学习之HTML(五)

    大家好,我是你们的小马哥,每天更新一篇文章,坚持就是胜利,希望你们也再接再厉。 动动你的小手,欢迎你的关注和点赞。 本节重点 body中的相关标签 学完这一章节将对标签使用有了初步的认识,可以使...

    11 天前
  • 零基础小白前端学习之HTML(七)

    大家好,我是你们的小马哥,每天更新一篇文章,坚持就是胜利,希望你们也再接再厉。 动动你的小手,欢迎你的关注和点赞。 本节主要讲解超链接标签,链接地址及图片标签,学习完这一章节我们可以把分散的独立的网...

    10 天前
  • 零基础HTML玩家的Bootstrap入门第一课(保证学会!)

    零、前言 又看着熟悉的Bootstrap3的网站,想起去年自己刚来时举步维艰的学习过程,想着之前踩过的那些坑,感慨万千。最近团队融入了新鲜血液,本着薪火相传的原则,为了不让后面的人踩同样的坑,...

    5 个月前
  • 零基础HTML玩家的Bootstrap入门第一课(保证学会!)

    零、前言 又看着熟悉的Bootstrap3的网站,想起去年自己刚来时举步维艰的学习过程,想着之前踩过的那些坑,感慨万千。最近团队融入了新鲜血液,本着薪火相传的原则,为了不让后面的人踩同样的坑,...

    5 个月前
  • 除去在JavaScript的正则表达式的HTML标签

    Alan MooreGabe提出了一个问题:Remove HTML Tags in Javascript with Regex,或许与您遇到的问题类似。 回答者karim79给出了该问题的处理方式: ...

    3 年前
  • 防止对HTML5的浏览器历史popstate滚动

    Alex Malet de Carteret提出了一个问题:Prevent browser scroll on HTML5 History popstate,或许与您遇到的问题类似。

    3 年前
  • 防止HTML中的选择

    WhitewallTower提出了一个问题:Prevent selection in HTML,或许与您遇到的问题类似。 回答者Tim Down给出了该问题的处理方式: The proprietary...

    3 年前

官方社区

扫码加入 JavaScript 社区