zoukankan      html  css  js  c++  java
  • 5.4 Components -- Wrapping Content in A Component(在组件中包裹内容)

    1.有时候,你可能希望定义一个模板,它包裹其他模板提供的内容。

    例如,假设我们创建一个blog-post模板,我们可以使用它来展现一个blog post:

    app/components/blog-post.hbs

    <h1>{{title}}</h1>
    <div class="body">{{body}}</div>

    现在,我们可以使用{{blog-post}}组件并且传递它到其他模板,作为其他模板的属性:

    {{blog-post title=title body=body}}
    • 在这种情况下, 我们想要展现的内容来自model。但是如果我们希望开发人员使用组件能够提供自定义的HTML内容呢?

    2. 除了你目前为止学过的simple form,组件也支持被用在block form。在block form中,组件可以被传递一个Handlebars template,它被渲染进组件的模板中{{yield}}出现的地方。

    3.为了使用block form,在组件名字前面添加一个#字符,然后确保添加一个封闭的标签。(详细可以查看Handlebars文档的block expressions)

    4. 在那种情况下,我们可以在block form中使用{{blog-post}}组件并且通过使用{{yield}}辅助器告诉Ember块内容应该被加载在哪。更新上面的例子,我们首先改变组件模板:

    app/templates/components/blog-post.hbs

    <h1>{{title}}</h1>
    <div class="body">{{yield}}</div>

    你可以看到我们用{{yield}}替换了{{body}}。这就告诉Ember当组件被使用时内容将被提供。

    下一步,我们更新使用组件的模板去使用block form:

    app/templates/index.hbs

    {{#blog-post title=title}}
      <p class="author">by {{author}}</p>
      {{body}}
    {{/blog-post}}

    5. 注意模板作用与在组件block内部和外部一样。如果一个属性在组件的外部可用,在组件块内部也是可用的。

  • 相关阅读:
    XMLHTTP使用具体解释
    C++之EOF()
    具体解释VB中连接access数据库的几种方法
    Android中部署自己的su
    hdoj 1052 Tian Ji -- The Horse Racing【田忌赛马】 【贪心】
    【C/C++多线程编程之九】pthread读写锁
    数据结构课程设计题目十二_计算机学院学生会的打印机(优先队列)
    百度开发人员面试题(优化)
    为Windows 7的winsxs目录瘦身,谨慎。
    sonix uvc驱动的加入 RT5350支持H264
  • 原文地址:https://www.cnblogs.com/sunshineground/p/5164064.html
Copyright © 2011-2022 走看看