(更新)knockout.js学习——1.5例子



    分析:在类中<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>


<script type="text/javascript">
    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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值