knockout——官网demo

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://localhost:81/js/knockout.js"></script>
</head>
<body>
<span>1:<b data-bind="text:stringValue"></b></span><br>
<span>2:<b data-bind="text:passwordValue"></b></span><br>
<span>3:<b data-bind="text:booleanValue"></b></span><br>
<span>4:<b data-bind="text:boolean"></b></span><br>
<span>5:<b data-bind="text:selectedOptionValue"></b></span>
 
<!---valueUpdate是可以实时更新的可选选项--->
<input data-bind="value:stringValue,valueUpdate: 'afterkeydown'">
<input data-bind="value:passwordValue,valueUpdate: 'afterkeydown'">
<input data-bind="value:booleanValue,valueUpdate: 'afterkeydown'">
<input type="checkbox" data-bind="checked: boolean">
<select data-bind="options: selectMutiple,value: 'selectedOptionValue'"></select>
<script>
var V = function(){
    this.stringValue = ko.observable(0);
    this.passwordValue = ko.observable(0);
    this.booleanValue = ko.observable(0);
    this.boolean = ko.observable(true);
    this.selectMutiple = ["Alpha", "Beta", "Gamma"];
    this.selectedOptionValue = ko.observable("Gamma")
};
ko.applyBindings(new V())
</script>
</body>
</html>

　　

//demo2

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script src="http://localhost:81/js/knockout.js"></script>
</head>
<body>
<form data-bind="submit:addItem">
    <input type="text" data-bind="value: item"/>
    <button type="submit">submit</button>
    <select multiple="multiple" data-bind="options: items"></select>
</form>
<script>
 
var V = function(){
    this.item = ko.observable("qihao");
    this.addItem = function(){
        if( !this.item() )return;
        console.log(this.items)
        this.items.push( this.item() )
    }.bind(this);
    this.items = ko.observableArray(["nono","super"]) //绑定的是数组
};
 
ko.applyBindings( new V );
</script>
</body>
</html>

　　

//DEMO3

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>knockOut</title>
<script src="http://localhost:81/js/knockout.js"></script>
</head>
<body>
<!--
<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>
-->
<br>
<!--
<h2>age is : <b data-bind="text: age"></b></h2>
<h2>age input : <input data-bind="value: cAge" /></h2>
-->
 
<div>click<b data-bind="text: count"></b></div>
<div><button data-bind="click : addCount, disable: vis">inc</button></div>
<div data-bind="visible: vis"><button data-bind="click : reset">reset</button></div>
<script>
function V(){
    this.count = ko.observable(0);
     
    this.addCount = function(){
        this.count( this.count()+1 );
    };
    this.vis = ko.computed(function(){
        return this.count()>3
    },this);
    this.reset = function(){
        this.count(0)
    };
}
ko.applyBindings( new V() )
/*
var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);
     
    //只要在该作用域里面有字段发生改变，就重新计算该内容的值
    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
};
 
console.log( new ViewModel("Planet", "Earth") )
ko.applyBindings(new ViewModel("Planet", "Earth"));
*/
/*
var AgeBind = function(v){
     
    this.cAge = ko.observable(v);<br>　　　　　　//这个是只要当前作用域的字段发生改变，就重新计算生成值
    this.age = ko.computed(function(){
        return this.cAge();
    },this);
};
ko.applyBindings(new AgeBind("28"))
*/
</script>
</body>
</html>

　　

本文作者：方方和圆圆

本文链接：https://www.cnblogs.com/diligenceday/p/3658968.html

版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。

posted @   方方和圆圆  阅读(508)  评论(0)  编辑  收藏  举报

再过一百年， 我会在哪里？

💬
评论
📌
收藏
💗
关注
👍
推荐
🚀
回顶
➖
收起
点击右上角即可分享
微信分享提示
AI IDE Trae