zoukankan      html  css  js  c++  java
  • knockoutjs关键点

    <p>Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'"/></p>
    <p>You have typed: <span data-bind="text: someValue"></span></p>
    someValue: ko.observable("edit me")

    部分实例:

    <div data-bind="html:details"></div>
    <div data-bind="css: { profitWarning: currentProfit() < 0 }">100万 </div>
    <div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">
    <a data-bind="attr: { href: url, title: details2 }"> Report</a>
    Profit Information
    </div>
    You've clicked <span data-bind="text: numberOfClicks"></span> times
    <button data-bind="click: incrementClickCounter">Click me</button>
    <div>
    <div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }"> Mouse over me </div>
    <div data-bind="visible: detailsEnabled"> Details </div>
    </div>
    <input data-bind="value: someModelProperty" />
    <p> <input type='checkbox' data-bind="checked: hasCellphone"/> I have a cellphone</p>
    <p> Your cellphone number: <input type='text' data-bind="value: cellphoneNumber, enable: hasCellphone"/></p>
    <p>Your value: <input data-bind="value: someValue, valueUpdate: 'afterkeydown'"/></p>
    <p>You have typed: <span data-bind="text: someValue"></span></p>

    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script type="text/javascript" src="knockout-v2.2.1.js"></script>


    <script type="text/javascript">

    var myviewModel = {
    details: ko.observable(),
    currentProfit: ko.observable(150000),
    url: ko.observable("year-end.html"),
    details2: ko.observable("Report including final year-end statistics"),
    numberOfClicks: ko.observable(0),
    incrementClickCounter: function () {
    var previousCount = this.numberOfClicks();
    this.numberOfClicks(previousCount + 1);
    },
    detailsEnabled: ko.observable(false),
    enableDetails: function () {
    this.detailsEnabled(true);
    },
    disableDetails: function () {
    this.detailsEnabled(false);
    },
    someModelProperty:ko.observable(""),
    hasCellphone: ko.observable(false),
    cellphoneNumber: ko.observable(""),
    someValue: ko.observable("edit me")

    };
    ko.applyBindings(myviewModel);
    myviewModel.details("<em>For further details, view the report <a href='report.html'>here</a>.</em>");
    myviewModel.currentProfit(-50);

    </script>

  • 相关阅读:
    js post提交
    JS转换HTML转义符
    HTML 空格的表示符号 nbsp / ensp / emsp 的区别
    JS解析XML文件和XML字符串
    js数组
    javaScript系列:js中获取时间new Date()详细介绍
    父类和子类(指针,对象,引用 ,盲点)
    震惊~数组居然可以直接比较大小
    二分递归求最大次大的方法(数组的下标的表示方法居然可以方括号内部加减)
    二分递归
  • 原文地址:https://www.cnblogs.com/wfpanskxin/p/3551958.html
Copyright © 2011-2022 走看看