[Step-By-Step Angular2]（2）數據綁定之插入符和單向綁定

来源:http://www.cnblogs.com/front-end-ralph/archive/2016/06/13/5579770.html
-Advertisement-
Play Games

在mvc/mvvm類框架出現之前，開發者通常需要手動更新html並維護html與數據之間的關係。隨著mvc思想在前端社區的普及和發展，view層和model層的解耦和分離機制已經是各框架的標配了。令人欣喜的是，angular2在現有各框架的理論基礎上對數據綁定重新進行了抽象，在架構上進行了革新，很有 ...


在mvc/mvvm類框架出現之前，開發者通常需要手動更新html並維護html與數據之間的關係。隨著mvc思想在前端社區的普及和發展，view層和model層的解耦和分離機制已經是各框架的標配了。
令人欣喜的是，angular2在現有各框架的理論基礎上對數據綁定重新進行了抽象，在架構上進行了革新，很有借鑒意義。從本文起我們就將開始討論angular2中的數據綁定。

angular2中有四種數據綁定：插入符（interpolation）、單向綁定（one-way binding）、事件綁定（event binding）和雙向綁定（two-way binding）。今天我們先介紹前兩種：插入符和單向綁定。

說到數據綁定就不得不提到模板層和數據。在angular1中，以scope屬性的形式存在的數據會通過watch機制來和模板進行綁定。具體操作中，既可以手動調用scope上的$watch方法，也可以在模板層中使用相關的綁定指令或大括弧綁定語法。然而，direcitve和scope的關係卻錯綜複雜：directive既可以復用父級的scope，也可以擁有自己的scope；當它擁有自己的scope時，這個scope既可以和父級scope沒有繼承關係，也可以通過prototype鏈來繼承父級scope上的屬性……總之，這種盤根錯節的數據關係使得angular1對於開發者並不那麼友好。自然，簡化數據關係和數據結構就成了Google在angular2開發中的重要任務之一。

在angular2中，component和數據有了清晰的對應關係：模板層中綁定的數據就是當前組件的實例屬性，scope的概念消失了。

我們先通過一些簡單的例子來幫助大家認識一下這種關係：

@Component({
    // selector告知angular在哪裡初始化AppComponent這個組件
    selector: 'hello-world',
    // AppComponent組件的具體模板
    template: `
        <h1 class="{{color}}">hello world, from {{name}}</h1>
    `
})
export class AppComponent {
    public name: string = 'Ralph';
};

我們在AppComponent類中添加了string類型的name屬性，並賦值為"Ralph"；相應地，為了使name屬性能夠在模板中被顯示出來，我們在<h1>標簽中增加了{{name}}，這就是angular2模板的插入符語法。

插入符語法不僅能用到html標簽的內容上，也可以用到屬性上：

import {Component} from '@angular/core';

@Component({
    styles: [`
        .blue{
            background: blue;
        }
    `],
    // selector告知angular在哪裡初始化AppComponent這個組
    selector: 'hello-world',
    // AppComponent組件的具體模板
    template: `
        <h1 class="{{classNames}}">hello world, from {{name}}</h1>
    `
})
export class AppComponent {
    public name: string = 'Ralph';
    public classNames: string = 'blue';
};

在上面的例子中，我們在Component裝飾器上增加了styles屬性，styles屬性的值是一個字元串數組，編譯後將作為當前組件的css；同時，我們還使用了es6中的反引號語法來包裹整塊字元串，省去了拼接的麻煩。h1上的class屬性和AppComponent上的classNames屬性進行了綁定，classNames被賦值為了blue，正好適配了class中的.blue選擇器。

在進行屬性綁定時，我們也可以使用單向綁定的語法：

import {Component} from '@angular/core';

@Component({
    styles: [`
        .blue{
            background: blue;
        }
    `],
    // selector告知angular在哪裡初始化AppComponent這個組
    selector: 'hello-world',
    // AppComponent組件的具體模板
    template: `
        <h1 [class]="classNames">hello world, from {{name}}</h1>
    `
})
export class AppComponent {
    public name: string = 'Ralph';
    public classNames: string = 'blue';
};

請註意class兩端的括弧[]不能省略，否則只會在初始值時賦值，而不會對變化進行監聽。

單向綁定語法還有一種較少使用的形式，把中括弧換為bind-首碼，功能和上例等價：

import {Component} from '@angular/core';

@Component({
    styles: [`
        .blue{
            background: blue;
        }
    `],
    // selector告知angular在哪裡初始化AppComponent這個組
    selector: 'hello-world',
    // AppComponent組件的具體模板
    template: `
        <h1 bind-class="classNames">hello world, from {{name}}</h1>
    `
})
export class AppComponent {
    public name: string = 'Ralph';
    public classNames: string = 'blue';
};

除了引入組件屬性並放棄scope外，angular2在框架思想上還有一個比較有價值的貢獻：徹底區分dom node屬性（property）和html標簽屬性（attribute）。

由於中文表述上property和attribute都翻譯為“屬性”，國內的開發者對於這兩個截然不同的概念可能相對缺少關註；然而在國外，如何區分property和attribute是最高頻出現的前端基礎面試題之一。既然大家都知道他們不同，那博主為什麼還說這是angular2的貢獻呢？angular2之前的框架，在遇到property和attribute相關的問題時，都只是“頭痛醫頭，腳痛醫腳”，只解決具體問題而沒有抽象到框架層面上去。以react為例，在文檔的forms章節中（https://facebook.github.io/react/docs/forms.html），認為input控制項的value property和value attribute之間的不同步是傳統html的一種缺失（absent when writing traditional form HTML）；而angular2的態度相對更巨集觀一些：property和attribute不是同一個概念，二者之間沒有絕對的對應關係，它們可以同步，也可以不同步，一些property在attribute中找不到對應，也有一些attribute在property中找不到對應；但是要記住一點，angular2的綁定是針對dom node property的綁定，而非針對HTML標簽attribute的綁定。
在這樣的設計之上，對於value、disabled、checked等屬性的處理就很清晰了；更為重要的是，它也為指令間、組件間的數據傳遞打下了良好的基礎。

以checked屬性的綁定為例：

import {Component} from '@angular/core';

@Component({
    // selector告知angular在哪裡初始化AppComponent這個組件
    selector: 'hello-world',
    // AppComponent組件的具體模板
    template: `
        <h1 class="{{color}}">hello world</h1>
        checked屬性綁定測試：<input type="checkbox" [checked]="checked" /><br />
        <button (click)="onClick()">click me</button>
    `
})
export class AppComponent {
    public checked: boolean = false;
    public onClick() {
        this.checked = !this.checked;
    }
};

上面的例子中出現了對click事件的監聽，暫時不是本節的重點，大家可以先忽略細節。input[type="checkbox"]上的checked屬性和AppComponent上的checked屬性進行了綁定。AppComponent上的checked屬性初始值為false，用戶每次點擊按鈕時，onClick方法被觸發，checked的值會相對於上一個值取反，從而實現選中/反選多選框的效果。

style和class是兩個比較特殊的屬性：style作為行內屬性時，其值依然是鍵值對的組合；class經常需要對某一個值進行添加和刪除，以完成toggle的操作。angular2對style和class的綁定有進一步的封裝。
對style進行綁定：

import {Component} from '@angular/core';

@Component({
    // selector告知angular在哪裡初始化AppComponent這個組件
    selector: 'hello-world',
    // AppComponent組件的具體模板
    template: `
        <h1 class="{{color}}">hello world</h1>
        <button (click)="onClick()" [style.background]="color">更改背景色</button>
    `
})
export class AppComponent {
    public color: string = 'blue';
    public onClick() {
        this.color = this.color === 'blue' ? 'green' : 'blue';
    }
};

對class進行綁定:

import {Component} from '@angular/core';

@Component({
    styles: [`
        .selected{
            background: blue;
        }
    `],
    // selector告知angular在哪裡初始化AppComponent這個組件
    selector: 'hello-world',
    // AppComponent組件的具體模板
    template: `
        <h1 class="{{color}}">hello world</h1>
        <button (click)="onClick()" [class.selected]="open">更改背景色</button>
    `
})
export class AppComponent {
    public open: boolean = false;
    public onClick() {
        this.open = !this.open;
    }
};

需要對style和class進行操作時，除了使用數據綁定以外，也可以使用相應的指令，稍後的章節中會有所涉及。

既然angular2的數據綁定通常是對dom node property的綁定，那麼需要綁定一個不具有property對應項的attribute屬性怎麼操作呢？作為一個例外，angular2為此提供了attr.attribute-name的綁定方式，以綁定aria-label屬性為例：

import {Component} from '@angular/core';

@Component({
    // selector告知angular在哪裡初始化AppComponent這個組件
    selector: 'hello-world',
    // AppComponent組件的具體模板
    template: `
        <h1 class="{{color}}">hello world</h1>
        <button [attr.aria-label]="type">help</button>
    `
})
export class AppComponent {
    public type: string = 'help';
};

對angular2的插入符和單向綁定的介紹就先到這裡，事件綁定、雙向綁定將放到後續的章節中。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [Effective JavaScript 筆記]第31條：使用Object.getPrototypeOf函數而不要使用__proto__屬性
    ES5引入Object.getPrototypeOf函數作為獲取對象原型的標準API，但由於之前的很多js引擎使用了一個特殊的__proto__屬性來達到相同的目的。但有些瀏覽器並不支持這個__proto__屬性，所以並不是完全相容的。例如對於擁有null原型的對象，不同的環境結果就不同了。 ...
  • js/jq實現獲取手機驗證碼倒計時效果
    眾所周知在前段的工作中註冊信息或獲取當前手機號信息等需求，我們基本上都要涉及到手機號驗證碼，在網路上搜索的案例雜亂無章，用的時候全是坑，真心不想用了，然後自己寫了一個獲取手機驗證碼的倒計時效果。有需求的伙伴們可以看看怎麼實現的。 如何獲取手機驗證碼？ 小月不知道大家是利用什麼平臺去獲取驗證碼的，但是 ...
  • 【小月博客】用HTML5的File API做上傳圖片預覽功能
    前段時間做了一個項目，涉及到上傳本地圖片以及預覽的功能，正好之前瞭解過 html5（點擊查看更多關於web前端的有關資源） 可以上傳本地圖片，然後再網上看了一些demo結合自己的需求，終於搞定了。（PS ： 不得不承認我這個人有多懶，沒有需求的時候我向來不主動去學習）。移動端完全支持哦！已測試。 下 ...
  • [Effective JavaScript 筆記]第30條：理解prototype、getPrototypeOf和__ptoto__之間的不同
    原型包括三個獨立但相關的訪問器。這三個單詞都是對單詞prototype做了一些變化。 C.prototype用於建立由new C()創建的對象的原型 Object.getPrototypeOf(obj)是ES5中用來獲取obj對象的原型對象的標準方法 obj.__proto__是獲取obj對象... ...
  • html css 控制div或者table等固定在指定位置
    .bottomTable{ background-color: rgb(249,249,249); z-index:99999999; position:fixed; bottom:0; left:0; width:100%; _position:absolute; /* for IE6 */ /* ...
  • document.write()列印輸出
    javascript的列印輸出document.write() 1 document.write(hello world !); ...
  • 紫橙綠藍的jQuery幻燈片切換
    效果展示 http://hovertree.com/texiao/jquery/77/看慣了左右切換的幻燈片，何問起向您推薦一個新穎的，旋轉切換，通過點擊按鈕的相應區域可以使幻燈片以旋轉的方式來切換圖片，非常有創意。點擊哪個顏色就切換到那個顏色，還帶音效。背景圖可以自定義。進入源碼下載頁面 http ...
  • React構建單頁應用方法與實例
    React作為目前最流行的前端框架之一，其受歡迎程度不容小覷，從這門框架上我們可以學到許多其他前端框架所缺失的東西，也是其創新性所在的地方，比如虛擬DOM、JSX等。那麼接下來我們就來學習一下這門框架是如何構建起一個單頁應用的。 前言 首先在學習這門框架前，你需要對以下知識有所瞭解： 原生JS基礎 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類