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个基础绑定。非常方便。

感谢支持

如果本文对您有帮助的话，请别吝啬手中的推荐票哦~