<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. collections模块—— Counter

    ounter目的是用来跟踪值出现的次数.它是一个无序的容器类型,以字典的键值对形式存储,其中元素作为key,其计数作为value.计数值可以是任意的Interger(包括0和负数).Counter类和 ...

  2. [bzoj4009] [HNOI2015]接水果 整体二分+扫描线+dfs序+树状数组

    Description 风见幽香非常喜欢玩一个叫做 osu!的游戏,其中她最喜欢玩的模式就是接水果. 由于她已经DT FC 了The big black, 她觉得这个游戏太简单了,于是发明了一个更 加 ...

  3. Error: Cannot find module 'gulp-sass'

    刚才首次启动ionic的时候,给我报了个这:Error: Cannot find module 'gulp-sass' 应该是缺少gulp-sass模块了,可又不敢贸然装,直接百度: stackove ...

  4. How to write date range query in Nest ElasticSearch client?

    Looking at the source code, there are two overloads of the OnField method. When I use the the that t ...

  5. iOS --高仿QQ空间页面

    1.首先分析一下qq空间页面的主要2个功能: 1)随着TableView的向上滑动导航栏的颜色渐变,变化过程是从透明变成白色. 2)随着TableView的向下滑动,图片随着offset放大. 2.首 ...

  6. php pdo prepare真的安全吗

    详见 这里 Let's say I have code like this: $dbh = new PDO("blahblah"); $stmt = $dbh->prepar ...

  7. 核心API的使用（给定一个字符串，统计每个字符出现的次数）

    /** * 给定一个字符串,统计每个字符出现的次数. 如:abdaewrwqask435a1aasd */public class ReplaceString { static int length; ...

  8. 部署到docker容器后图片验证码显示不出来

    Dockerfile如下: FROM openjdk:8-jre-alpineARG JAR_FILECOPY ${JAR_FILE} app.jarENTRYPOINT ["java&qu ...

  9. Python基础部分的疑惑解析（1）

    Python介绍: 是一种全能的语言,虽然执行效率低,但是开发效率高 现在也存在多种版本,IPYTHON,JPYTHON,但最重要的是CPYTHON,其他都是作用于各种语言的粘合剂版本,执行效率低,C ...

  10. Docker 入门相关

    什么是Docker和容器 可能是把Docker的概念讲的最清楚的一篇文章 为什么要用Docker 相关网址 Window平台Docker下载 一些基本知识 Volume docker volume l ...