zoukankan      html  css  js  c++  java
  • 5.5 Components -- Customizing A Compnent's Element

    一、概述

    默认的,每一个组件都基于一个<div>元素。如果你在开发者工具中查看一个渲染的组件,你将会看到一个像这样的DOM表示:

    <div id="ember180" class="ember-view">
      <h1>My Component</h1>
    </div>

    你可以为你的组件自定义Ember生成元素的类型,包括它的属性和类名,通过创建一个Ember.Component的子类。

    二、Customizing the element

    使用一个不是div的标签,Ember.Component的子类分配给它一个tagName属性。这个属性可以以任何有效的HTML5标签名称作为字符串。

    app/components/navigation-bar.js

    export default Ember.Component.extend({
      tagName: 'nav'
    });

    app/templates/components/navigation-bar.hbs

    <ul>
      <li>{{#link-to 'home'}}Home{{/link-to}}</li>
      <li>{{#link-to 'about'}}About{{/link-to}}</li>
    </ul>

    三、Customizing class names

    1. 你也可以通过设置它的classNames属性为一个字符串数组来制定组件的元素的类名。

    app/components/navigation-bar.js

    export default Ember.Component.extend({
      classNames: ['primary']
    });

    2. 如果你希望通过组件类型来确定类名,你可以使用类名绑定。如果你绑定一个布尔属性,类名将会根据这个值被添加或者被移除:

    app/components/todo-item.js

    export default Ember.Component.extend({
      classNameBindings: ['isUrgent'],
      isUrgent: true
    });

    这个组件将会被渲染为:

    <div class="ember-view is-urgent"></div>

    如果isUrgent被改为false,然后is-urgent类名会被移除。

    3. 默认的,布尔属性的名字被dasherized。你可以通过一个""来自定义类名:

    app/components/todo-item.js 

    export default Ember.Component.extend({
      classNameBindings: ['isUrgent:urgent'],
      isUrgent: true
    }); 

    者将被渲染为:

    <div class="ember-view urgent">

    4. 除了该值为true时自定义名称之外,你也可以在该值为false时指定一个类名:

    app/components/todo-item.js

    export default Ember.Component.extend({
      classNameBindings: ['isEnabled:enabled:disabled'],
      isEnabled: false
    });

    这将被渲染为:

    <div class="ember-view disabled">

    5. 你也可以指定一个类,它仅仅在值为false时被添加:

    app/components/todo-item.js

    export default Ember.Component.extend({
      classNameBindings: ['isEnabled::disabled'],
      isEnabled: false
    });

    将被渲染为:

    <div class="ember-view disabled">

    如果isEnabled属性被设置为true,不会添加类名:

    <div class="ember-view">

    6. 如果被绑定的属性值是一个字符串,这个值将会作为属性名被添加不会有任何更改:

    app/components/todo-item.js

    export default Ember.Component.extend({
      classNameBindings: ['priority'],
      priority: 'highestPriority'
    });

    渲染为:

    <div class="ember-view highestPriority">

    四、Customizing Attriburtes

    你可以绑定属性到代表组件的DOM元素,利用attributeBindings

    app/components/link-item.js

    export default Ember.Component.extend({
      tagName: 'a',
      attributeBindings: ['href'],
      href: "http://emberjs.com"
    });

    你也可以绑定这些属性attributes到不同的命名属性properties:

    app/components/link-item.js

    export default Ember.Component.extend({
      tagName: 'a',
      attributeBindings: ['customHref:href'],
      customHref: "http://emberjs.com"
    });
  • 相关阅读:
    一起谈.NET技术,WPF 自定义快捷键命令(Command) 狼人:
    一起谈.NET技术,WPF 基础到企业应用系列5——WPF千年轮回2 狼人:
    一起谈.NET技术,asp.net页面中输出变量、Eval数据绑定等总结 狼人:
    单片机沉思录——再谈static
    Java平台对脚本语言支持之ScriptEngine创建方式
    [置顶] [Html] Jquery那些事
    codeforces 165E Compatible Numbers
    2013第六周上机任务【项目2 程序填空(1)】
    腾讯再否认微信收费 三大运营商态度分化
    电子钟程序
  • 原文地址:https://www.cnblogs.com/sunshineground/p/5164181.html
Copyright © 2011-2022 走看看