Javascript MVVM模式前端框架—Knockout 2.1.0系列(4)：文本和樣式綁定(中篇)

*本文已經同步至索引目錄：http://www.cnblogs.com/wbpmrck/archive/2012/05/16/Knockout-introduction.html

前言&基礎

在我們開發應用的過程中，肯定都會碰到需要向用戶展現內容的需求，比如展現一段文本，或者一段html等，本章我們來看2個非常實用的綁定：

• text綁定
• html綁定

Text Binding(文本綁定)

• ko內置的基礎綁定之一 。
• 用於控制DOM元素的innerText屬性。
• 會自動對text內容進行Html編碼。(也就是說你綁定的是什么值，展示出來就是什么值，比如"<div></div>"不會展示為一個div，而是字符"<div></div>")
• 如果與observable或者computed屬性綁定，則會產生雙向綁定效果。

Html Binding(Html綁定)

這個綁定的功能與text binding相對應，不同點為：

• 控制DOM元素的innerHtml屬性
• 不會對內容進行Html編碼，你可以定義自己的html標簽注入進去

實例講解：Text Binding

Text Binding在本系列之前的Demo中已經使用過，語法十分簡單：

基本語法

1、使用Text Binding

Html代碼

Today's message is: <span data-bind="text: myMessage"></span>

Js代碼

var viewModel = {
        myMessage: ko.observable() 
    };
    viewModel.myMessage("Hello, world!"); // 這是要顯示的文本內容

Demo1：演示Text Binding基本用法

http://jsfiddle.net/wbpmrck/xKZG7/8/embedded/

看不到內嵌Demo的點這里查看在線Demo

實例講解：Html Binding

基本語法

1、使用Html Binding

Html代碼

<div data-bind="html: details"></div>

Js代碼

var viewModel = {
        details: ko.observable() // Initially blank
    };
    viewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>"); // HTML標簽會被渲染

Demo1：演示Html Binding基本用法

http://jsfiddle.net/wbpmrck/xKZG7/9/embedded/

看不到內嵌Demo的點這里查看在線Demo

總結

今天主要介紹了ko中的Text Binding和Html Binding用法，在使用Ko開發的過程中，需要展示內容信息會經常使用到這2個基礎綁定。非常方便。

感謝支持

如果本文對您有幫助的話，請別吝嗇手中的推薦票哦~