使用<yield>标签来包含内部HTML

原创 2016年08月31日 11:38:43

<yield> 标签是riot的特殊核心功能,可以在运行时将自定义标签的内部模板进行编译和插入,这个技术使你可以用从服务端渲染生成的html内容来扩展你的标签模板

例如使用下面的 riot 标签 my-post

<my-post>
  <h1>{ opts.title }</h1>
  <yield/>
  this.id = 666

</my-post>

你可以在应用中随时包含 <my-post> 标签

<my-post title="What a great title">
  <p id="my-content-{ id }">My beautiful post is just awesome</p>
</my-post>

riot.mount('my-post') 加载后渲染成:

<my-post>
  <h1>What a great title</h1>
  <p id="my-content-666">My beautiful post is just awesome</p>
</my-post>

多点YIELD

>=2.3.12

<yield>标签还支持将模板中不同位置的html内容插入到指定的位置。

例如,使用下面的自定义标签 my-other-post

<my-other-post>
  <article>
    <h1>{ opts.title }</h1>
    <h2><yield from="summary"/></h2>
    <div>
      <yield from="content"/>
    </div>
  </article>
</my-other-post>

在应用中可以这样使用<my-other-post>标签:

<my-other-post title="What a great title">
  <yield to="summary">
    My beautiful post is just awesome
  </yield>
  <yield to="content">
    <p>And the next paragraph describes just how awesome it is</p>
    <p>Very</p>
  </yield>
</my-other-post>

<my-other-post>
  <article>
    <h1>What a great title</h1>
    <h2>My beautiful post is just awesome</h2>
    <div>
      <p>And the next paragraph describes just how awesome it is</p>
      <p>Very</p>
    </div>
  </article>
</my-other-post>

YIELD 与 循环

<yield> 标签可以用在循环中或子标签中,但你必须知道 它总是使用子标签的数据进行解析和编译

看下面的 blog.tag riot 组件

<blog>
  <h1>{ title }</h1>
  <my-post each={ posts }>
    <a href={ this.parent.backToHome }>Back to home</a>
    <div onclick={ this.parent.deleteAllPosts }>Delete all the posts</div>
  </my-post>

  this.backToHome = '/homepage'
  this.title = 'my blog title'

  this.posts = [
    { title: "post 1", description: 'my post description' },
    { title: "post 2", description: 'my post description' }
  ]

  // 本例中需要这个bind来在子标签里也保留父上下文
  deleteAllPosts() {
    this.posts = []

    // 我们需要手动调用 update 函数,因为当前函数由子标签触发,不会自动冒泡到父一级
    this.update()
  }.bind(this)

</blog>

<my-post>
  <h2>{ title }</h2>
  <p>{ description }</p>
  <yield/>
</my-post>

将编译成:


<blog>
  <h1>my blog title</h1>
  <my-post>
      <h2>post 1</h2>
      <p>my post description</p>
      <a href="/homepage">Back to home</a>
      <div>Delete all the posts</div>
  </my-post>
  <my-post>
      <h2>post 2</h2>
      <p>my post description</p>
      <a href="/homepage">Back to home</a>
      <div>Delete all the posts</div>
  </my-post>
</blog>




版权声明:本文为博主原创文章,未经博主允许不得转载。

yield()函数的使用

yield函数在并发编程中是非常重要的一个概念,尤其在多核计算机还不是那么普及的年代,要完成一个“并发”程序,是不得不借助yield函数的。 我们知道,yield的意思是“屈服、礼让”,在程序中表现...
  • ztliduo
  • ztliduo
  • 2017年01月15日 23:07
  • 1156

浅谈Python中的yield表达式

浅谈Python协程中的yield表达式python生成器python中生成器是迭代器的一种,使用yield返回函数值。每次调用yield会暂停,而可以使用next()函数和send()函数可以恢复生...
  • u014683535
  • u014683535
  • 2016年06月25日 11:26
  • 2416

十二、Python的yield用法与原理

翻了一篇workflow上关于yield的用法,翻的有点烂,在这里贻笑大方了,慢慢来,总是期待着一点一点的进步。 为了理解yield的机制,我们需要理解什么是生成器。在此之前先介绍迭代器iter...
  • alvine008
  • alvine008
  • 2015年02月02日 16:21
  • 43120

NET 本质论 - 了解 C# foreach 的内部工作原理和使用 yield 的自定义迭代器

本文转自https://msdn.microsoft.com/zh-cn/magazine/mt797654 和 https://msdn.microsoft.com/zh-cn/magazine/m...
  • dz45693
  • dz45693
  • 2017年12月28日 10:36
  • 164

HTML div标签内部组件导致onmouseout事件调用问题

这几天一直纠结于一个html页面上的bug, 我们前台框架是ICEFaces3.1, 这些无所谓,翻译出来都是html标签     问题表述: 情况是我的一个div里套了很多ul和li标签,我在这个...
  • donet_expert
  • donet_expert
  • 2014年08月14日 16:46
  • 506

学习HTML(五)——<body>内部可用标签介绍

本文接着上一篇,继续介绍body标签中常用的标签 1)图形标签 图形标签用于添加一幅图形到网页中,在使用这个标签时,并不是说像其它标签那样把图形放到开始和闭合标签之间,而是把图形的地址放到标签的属性当...
  • gc_2299
  • gc_2299
  • 2017年11月12日 19:56
  • 29

HTML的表单form以及form内部标签

form表单的使用
  • HYM1987
  • HYM1987
  • 2014年05月01日 00:35
  • 1778

公司内部自定义标签的使用

  • 2010年11月19日 15:34
  • 3.8MB
  • 下载

html中对hidden状态input控件进行赋值,而赋的值中包含标签,例如"<img~~~>",这样的话>就会导致input控件被截断!

html中对hidden状态input控件进行赋值,而赋的值中包含标签,例如"",这样的话>就会导致input控件被截断!赋的值就会在页面上展示出来!...
  • SThranduil
  • SThranduil
  • 2016年09月22日 15:27
  • 2873

PHP & Javascript 如何对字符串中包含html标签进行编码 整理

为什么要对字符串编码? 某些字符串中包含html标签,不
  • lein_wang
  • lein_wang
  • 2014年11月25日 11:35
  • 1360
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用<yield>标签来包含内部HTML
举报原因:
原因补充:

(最多只允许输入30个字)