<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="js/jquery-1.11.1.min.js"></script>

    <script src="js/knockout-3.3.0.js"></script>

    <style>

        .b_b

        {

            background-color: blue;

        }

    </style>

    <script type="text/javascript">

        var viewModel = {

            currentProfit: ko.observable(1) // Positive value, so initially we don't apply the "bb" class

        };

        $(function () {

            viewModel.currentProfit(-1); // Causes the "bb" class to be applied

            ko.applyBindings(viewModel);

        })

    </script>

</head>

<body>

    <div data-bind="css: { 'b_b': currentProfit() < 0 }">

        Profit Information

    </div>

</body>

Knockout.js CSS绑定的更多相关文章

  1. Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.

    目的:使用knockout提供的机制实现输入框失去焦点后的校验工作,并使用CSS绑定给未通过校验的输入框添加红色边框突出显示. 步骤: 先在htm中添加.error的css样式, 并在输入框中的dat ...

  2. Knockout: 实践CSS绑定和jQuery的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示.

    目的: 实践一下Knockout提供的CSS绑定功能和JQuery的blur失去焦点事件, 这次不使用Knockout的afterkeydown事件了． 步骤: 先在htm中添加.error的css样 ...

  3. Knockout: 实践CSS绑定和afterkeydown事件, 给未通过校验的输入框添加红色边框突出显示; 使用afterkeydown事件自动将输入转大写字母.

    目的: 实践一下Knockout提供的CSS绑定功能和afterkeydown事件． 步骤: 先在htm中添加.error的css样式, 并在输入框中绑定css: { error: !firstNam ...

  4. knockout.js模板绑定之利用Underscore.js模板引擎示例

    View代码 <h1>People</h1> <ul data-bind="template: { name: 'peopleList' }"> ...

  5. Knockout.js Attr绑定

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  6. Knockout.js Style绑定

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  7. Knockout.js Text绑定

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  8. Knockout.js Visible绑定

    <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...

  9. Knockout.Js官网学习（html绑定、css绑定）

    Html绑定 html绑定到DOM元素上,使得该元素显示的HTML值为你绑定的参数.如果在你的view model里声明HTML标记并且render的话,那非常有用. 简单示例 <div dat ...

随机推荐

  1. Android 内存管理研究

    1. 内存管理基础知识 http://www.cnblogs.com/xingfuzzhd/p/3485924.html 1. mImageView.setImageResource(R.drawab ...

  2. luoguP4647 [IOI2007] sails 船帆

    https://www.luogu.org/problemnew/show/P4647 首先发现答案与顺序无关,令 $ x_i $ 表示高度为 $ i $ 的那一行帆的个数,第 $ i $ 行对答案的 ...

  3. HTTP 缓存机制详解

    从这里看的 http://mp.weixin.qq.com/s/8UXEMQBkV9hHwtu9R7mV5w

  4. jquery源码解析：val方法和valHooks对象详解

    这一课,我们将讲解val方法,以及对value属性的兼容性处理,jQuery中通过valHooks对象来处理. 首先,我们先来看下val方法的使用: $("#input1").va ...

  5. SpringBoot idea maven打包war及运行war包

    pom.xml修改打包类型pom改为war <artifactId>Test02</artifactId> <packaging>war</packaging ...

  6. python-----读写操作

    1. 文件的读取 注意:在windows中文件的路径是这样:C:\Users\name\mystuff .由于\u在python中表示转义如果使用此文件路径就会报错.解决方法: a.把斜杠\改为反斜杠 ...

  7. leetcode-8-字符串转整数 (atoi)

    题目描述: 实现 atoi,将字符串转为整数. 在找到第一个非空字符之前,需要移除掉字符串中的空格字符.如果第一个非空字符是正号或负号,选取该符号,并将其与后面尽可能多的连续的数字组合起来,这部分字符 ...

  8. 2016级算法期末上机-I.难题·ModricWang's Fight with DDLs III

    1126 ModricWang's Fight with DDLs III 思路 由于题目中已经说明了时间经过了正无穷,因此初始位置是不重要的,并且每条边.每个点的地位是均等的.因此到达每个点的概率就 ...

  9. Codeforces Round #555 (Div. 3) C2. Increasing Subsequence (hard version)【模拟】

    一 题面 C2. Increasing Subsequence (hard version) 二 分析 需要思考清楚再写的一个题目,不能一看题目就上手,容易写错. 分以下几种情况: 1 左右两端数都小 ...

  10. smtp自动发送邮件demo

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net ...