zoukankan      html  css  js  c++  java
  • 5.3 Components — Passing Properties to A Component

    1. 默认情况下,一个组件在它使用的模板范围中没有访问属性。

    例如,假想你有一个blog-post组件被用来展示一个blog post:

    app/templates/components/blog-post.hbs

    <h1>Component: {{title}}</h1>
    <p>Lorem ipsum dolor sit amet.</p>

    你可以看到它有一个{{title}}Handlebars表达式去打印title属性的值到<h1>

    2. 现在设想我们有下面的模板和路由:

    app/routes/index.js

    export default Ember.Route.extend({
      model() {
        return {
          title: "Rails is omakase"
        };
      }
    });

    app/templates/index.hbs

    <h1>Template: {{title}}</h1>
    {{blog-post}}

    运行这份代码,你会发现第一个<h1>(来自外面的模板)展现title属性,但是第二个<h1>(来自组件的)是空的。

    3. 我们可以修复它通过使title属性对组件可用:

    {{blog-post title=title}}

    这样,通过使用相同的名字title使外面模板范围的title属性在组件模板中可用。

    4. 如果,在上面例子中model的title属性被name属性替代了,我们可以改变模板的用法:

    {{blog-post title=name}}

    换句话说,通过使用componentProperty=outerProperty,你绑定一个来自外部范围的命名属性到内部范围的命名属性。

    5. 要注意,这些属性的值是被绑定的。不管你改变这个值是在model中还是在组件内部,值保持同步。在下面的例子中,在text field中输入一些文本,无论是在外部模板还是在组件内部,主要它们是如何保持同步的。

    6. 你也可以绑定来自一个{{#each}}循环中的属性。这将为每一条数据创建一个组件并且为循环中的每一个model绑定它。

    {{#each model as |post|}}
      {{blog-post title=post.title}}
    {{/each}}

    7. 如果你使用{{component}}辅助器来渲染你的模板,你可以用相同的方式传递属性。

    {{component componentName title=title name=name}}
  • 相关阅读:
    【CF446D】DZY Loves Games 高斯消元+矩阵乘法
    【CF542D】Superhero's Job 暴力
    【CF660E】Different Subsets For All Tuples 结论题
    【CF666C】Codeword 结论题+暴力
    【CF666E】Forensic Examination 广义后缀自动机+倍增+线段树合并
    【CF461E】Appleman and a Game 倍增floyd
    【CF471E】MUH and Lots and Lots of Segments 扫描线+并查集+线段树+set
    【CF480D】Parcels DP
    【CF497E】Subsequences Return 矩阵乘法
    SSAS 项目部署失败的问题
  • 原文地址:https://www.cnblogs.com/sunshineground/p/5163954.html
Copyright © 2011-2022 走看看