KnockoutJs简单入门知识讲解

最新推荐文章于 2023-02-04 15:12:17 发布

小苏学姐

最新推荐文章于 2023-02-04 15:12:17 发布

阅读量981

点赞数

分类专栏： Knockoutjs 文章标签：前端框架 Knockoutjs mvvm

本文链接：https://blog.csdn.net/hlfsunshine/article/details/51867746

版权

Knockoutjs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.Knockoutjs介绍
Knockout是一款很优秀的JavaScript库，KnockoutJS是一款MVVM前端框架，从框架的模式中我们可以看出，在页面中需要有三个必须的元素：M（模型）、V（视图）和VM（视图模型）。

一些很复杂的话，目前在入门阶段，其实很多事不清楚的，目前只要先形成一个概念，就是说knockjs有主要有两个方面：一个是数据，一个是视图。带着这样的一个初始观念去学习，会让我们更快地掌握它的相关知识。

2.Knockoutjs小例子
像这类的框架无非就是需要多用，毕竟框架更新的非常快，我们要想快速掌握一门新的技术，多去动手实践就好了，先看例子

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 2.视图 -->
姓：<input type="text" data-bind="value:firstname"><br><br>
名：<input type="text" data-bind="value:lastname"><br><br>
世界：<input type="text"  data-bind="value:uhome">
 <br><br>
 <p>信息显示：你好<span data-bind="text:fullname"></span>,<span data-bind="text:uhome"></span>欢迎你</p>

<script src="js/knockout.js"></script>

<script>

<!-- 1.模型 (方式一)-->
var viewModel=function(first,last,home){
    this.firstname=ko.observable(first);
    this.lastname=ko.observable(last);
    this.uhome=ko.observable(home);
    this.fullname=ko.computed(function(){
        return this.firstname()+"  "+this.lastname();
    },this);
} 

<!-- 3.绑定关系-->
ko.applyBindings(new viewModel("lanfang","he","ko world!"));
</script>
</body>
</html>

上面就是一个简单的小例子，记得导入js库.

3.小例子2

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>

</head>
<body> 
<p>输入</p>
<!-- 动态绑定 输入框的信息和uname upass绑定  input  value-->
<p>uname：<input data-bind="value:uname,valueUpdate:
 'afterkeydown'"></p>
<p>upass：<input data-bind="value:upass,valueUpdate:
 'afterkeydown'"></p>

<p>输出</p>
<!-- 动态绑定 展示的信息和uname upass绑定  strong text -->
<p>uname：<strong data-bind="text:uname"></strong></p>
<p>upass：<strong data-bind="text:upass"></strong></p>

<script src="js/knockout.js"> </script><!-- 引入knockoutjs -->
<script>
function appViewModel(){ 
    //给附一个默认的值  当前面的输入框改变的时候，会自动修改数据
this.uname=ko.observable("test");
this.upass=ko.observable("psw");
}
<!-- 激活绑定-->
ko.applyBindings(appViewModel());
</script>
</body>
</html>

4.填充下拉框

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>
 student:
 <select data-bind="options:allStudents,optionsText:'stuName'"></select>                                
 <br> <br>

</body>

<script src="js/knockout.js"> </script><!-- 引入knockoutjs -->
<script>

var allStudents = [
                   { stuName: 'zhangsan', gender: '男', stuNum: '1001' },
                   { stuName: 'zhangsan2', gender:  '女', stuNum: '1002' },
                   { stuName: 'zhangsan3', gender:  '男', stuNum: '1003' }
                    ];
var viewModel = { 

    };

    ko.applyBindings(viewModel); // Makes Knockout get to work
    // 注意：ko. applyBindings需要在上述HTML之后应用才有效 
</script>

</html>

5.下拉框进阶

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>
 student:
 <select data-bind="options:allStudents,optionsText:'stuName',value:findStu"></select>                                
 <br> <br>
  You've chosen:
    <b data-bind="text:findStu().gender"></b>
    (number: <span data-bind='text:findStu().stuNum '></span>)
</body>

<script src="js/knockout.js"> </script><!-- 引入knockoutjs -->
<script>

var allStudents = [
                   { stuName: 'zhangsan', gender: '男', stuNum: '1001' },
                   { stuName: 'zhangsan2', gender:  '女', stuNum: '1002' },
                   { stuName: 'zhangsan3', gender:  '男', stuNum: '1003' }
                    ];
var viewModel = { 
        findStu:ko.observable(allStudents[0])
    };

    ko.applyBindings(viewModel); // Makes Knockout get to work
    // 注意：ko. applyBindings需要在上述HTML之后应用才有效 
</script>

</html>

小苏学姐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
KnockoutJs简单入门知识讲解

1.Knockoutjs介绍 Knockout是一款很优秀的JavaScript库，KnockoutJS是一款MVVM前端框架，从框架的模式中我们可以看出，在页面中需要有三个必须的元素：M（模型）、V（视图）和VM（视图模型）。一些很复杂的话，目前在入门阶段，其实很多事不清楚的，目前只要先形成一个概念，就是说knockjs有主要有两个方面：一个是数据，一个是视图。带着这样的一个初始观念去学习
复制链接

扫一扫