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}}
  • 相关阅读:
    HDU 1124 Factorial
    hdu 1690 Bus System
    hdu 1113 Word Amalgamation
    POJ 2482 Stars in Your Window
    hdu 1385 ZOJ 1456 Minimum Transport Cost(经典floyd)
    hdu 1907 John
    VMware 虚拟机 安装 UBuntu 9.10 命令模式转换成窗口模试
    #pragma CODE_SEG __NEAR_SEG NON_BANKED详解
    Ubuntu 下Hadoop 伪分布式 hadoop0.20.2.tar.gz 的安装
    文件拷贝代码以及疑问
  • 原文地址:https://www.cnblogs.com/sunshineground/p/5163954.html
Copyright © 2011-2022 走看看