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>

  • 相关阅读:
    P3254 圆桌问题
    P4868 Preprefix sum
    2021sd省选游记
    P4145 上帝造题的七分钟2 / 花神游历各国
    P2801 教主的魔法
    P4147 玉蟾宫(悬线法)
    P1944 最长括号匹配
    CF1214D Treasure Island
    Loadrunner与kylinPET的能力对比测试--web动态请求
    Summer——从头开始写一个简易的Spring框架
  • 原文地址:https://www.cnblogs.com/wfpanskxin/p/3551958.html
Copyright © 2011-2022 走看看