代码改变世界

Javascript MVVM模式前端框架—Knockout 2.1.0系列(4):文本和样式绑定(中篇)

2012-06-04 14:41  刺客之家  阅读(2398)  评论(13编辑  收藏  举报

*本文已经同步至索引目录: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个基础绑定。非常方便。

感谢支持

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

本博客文章若非标记转载,均为原创,转载请注明出处~