分析:在类中<br />
1、把一个字符串转化为一个数字进行计数:parseInt(string)<br />
2、在script中在类里面引用自己的属性函数时,需要带上括号,如parseInt(this.inputValue());<br />
3、在初始化定义了ko.observable之后,在后续步骤中引用不需要加上ko.observable()直接用该属性。<br />
4、在push的过程,this.divCon.push()。因为divCon是数组对象,不是函数对象?虽然是属性也不需要带上括号。<br />
6、obj.indexOf(string)指定string在对象中出现的位置。<br />
7、排序:.sort()
8、清空该选项:removeAll()
9、在类中,一定要使用this.inputValue = ko.observable()的方式。要写this和等号或function(){}。
10、multiple="multiple"可以使select 的 option 展示区域显示。
11、当前的选中option表示为:selectedOptions。
12、在html中click的后面function都不带括号。但是在enable等中引用时候取其属性需要带上括号。获取数组对象的长度时数组对象也要带上括号。
例子:点击添加、排序、下拉框选中删除
<head>
<title></title><script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tmpl.js"></script>
<script type="text/javascript" src="js/knockout-3.1.0.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div><input type="text" data-bind ="value:inputValue,valueUpdate:'afterkeydown'" /></div>
<div><button data-bind="click: addCon, enable: inputValue().length > 0">add input to div </button></div>
<div>input中输入的结果加上一定值以后是:<span data-bind="text: tj()"></span></div>
<button data-bind="click: divCon.sort(), enable: divCon().length > 0">对div展示区域内容的排序</button>
<div style="width:500px;height:200px;border:1px solid #000;" data-bind="text:divCon"></div><br />
<br />
<div><button data-bind="click: addOption, enable: inputValue().length > 0">add input to option </button></div>
<button data-bind="click:clearOption,enable:options().length>0">清空选中的option</button>
<select data-bind="options:options,selectedOptions:nowOption" height="5" multiple="multiple"></select>
var viewModel = function(){
this.inputValue = ko.observable(""),
this.addNo = new ko.observable(""),
this.divCon = new ko.observableArray(["90","9"]),
this.options = new ko.observableArray(["k","k1","k2"]),
this.nowOption = new ko.observableArray(["k"]),
this.selectedOption = new ko.observable(""),
this.tj = function () { return parseInt(this.inputValue()) + 19; },
this.addCon = function () {
if (this.inputValue() != "") {
this.divCon.push(this.inputValue());
}
// this.inputValue(""); //在点击操作完成后,该输入框自动清零。div:tj()因为是观测值,也为零了。
},
this.addOption = function () {
if (this.inputValue() != "") {
this.options.push(this.inputValue());
}
},
this.clearOption = function () {
// if ((this.inputValue() != "") & (this.options.indexOf(this.inputValue()) < 0)) {
this.options.removeAll(this.nowOption()); // options是数组对象,引用方法时不需要带上括号。
this.nowOption([]);
// }
}
};
ko.applyBindings(new viewModel());
</script>
</body>