Knockout.js 组件

时间：2021-07-16 23:46:19

Knockout.js是一个基于MVVM模式的轻量级的前端框架，有多轻？根据官网上面显示的最新版本v3.4.0，仅22kb。能够友好地处理数据模型和界面DOM的绑定，最重要的是，它的绑定是双向的，也就是说数据模型变化了，界面DOM上的数据也会跟着发生变化，反过来，界面DOM上的数据变化了，数据模型也会相应这个变化

Knockout.js官网：http://knockoutjs.com

Knockout.js开源地址：https://github.com/knockout/knockout

MVVM模式：这是一种创建用户界面的设计模式，MVVM把它拆分成三块就是Model、View、ViewModel，Model就是数据模型，View就是我们的视图，ViewModel就是一个视图模型，用来绑定数据模型和视图上面的dom元素。

实例

官网下载knockout.js文件，然后引用到view页面里面

<script src="~/scripts/knockout/knockout-3.4.0.js"></script>

完整案例

<!DOCTYPE html>

<html>

<#include "../include.ftl">

<head>

    <meta charset="utf-8">

    <title>test</title>

    <script src="${basePath}/scripts/jquery/jquery-1.9.0.min.js"></script>

    <script src="${basePath}/scripts/knockout/knockout-3.4.0.js"></script>

</head>

<body>

<div>

　　　　<!-- view视图里面定义绑定data-bind的标签 ;注意：对应input标签的文本，需要使用textinput，而普通标签的文本使用text即可。-->

        From：<label data-bind="text:From"></label><br />

        To：<input type="text" data-bind="textinput:To" />

    </div>

</body>

</html>

<script type="text/javascript">

　　//定义一个viewmodel：Name，Profession标签与html元素标签区分大小写

    var myViewModel = {

            From: "去了",

            To: "来了",

        };

　　//需要激活knockout的绑定

    ko.applyBindings(myViewModel);

</script>

效果

Knockout.js 组件

ko.applyBindings()方法有两个参数，第一个就是我们需要绑定的viewmodel

第二个参数是一个可选参数，它表示viewmodel绑定的标签的作用域
ko.applyBindings(myViewModel,document.getElementById("ID"));

第二个参数限定了myViewModel的作用范围，也就是说，只有在id="lb_name"的标签上面绑定才会生效，如果第二个参数是div等容器标签，它表示该绑定的范围为该div下面的所有子标签。

其他详看：http://www.cnblogs.com/landeanfen/p/5400654.html

相关文章