<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. 8-网络请求之http

    本篇博客对应视频讲解 回顾 上一篇讲了Linq的使用,大家自己上手实践之后,相信一定会感到非常快捷方便.更多详细的内容还是需要自己去阅读官方文档. 今天要讲网络请求中的http请求,这也是在编程当中经 ...

  2. mysql 行转列 （结果集以坐标显示）

    create table capacity( type int , numbers int , monthst INT ); select type, sum(case monthst when 1 ...

  3. python 项目自动生成 requirements.txt 文件

    生成 requirements.txt 文件的目的: 安装 pthon 项目时需要把此项目所有依赖的第三方包安装完成.项目依赖的第三方包统一放到 requirements.txt 文件中即可. 怎么自 ...

  4. “全栈2019”Java异常第一章：什么是异常？

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...

  5. Code Chef January Challenge 2019题解

    传送门 \(div2\)那几道题不来做了太水了-- \(DPAIRS\) 一个显然合法的方案:\(A\)最小的和\(B\)所有连,\(A\)剩下的和\(B\)最大的连 算了咕上瘾了,咕咕咕 const ...

  6. Python(序列化json,pickle,shelve)

    序列化 参考:https://www.cnblogs.com/yuanchenqi/articles/5732581.html # dic = str({'1':'111'}) # # f = ope ...

  7. 49.RocketMQ 双主搭建（本文非EamonSec原创）

    声明:本文非EamonSec原创,copy自网上下载的某个个文件 1.RocketMQ介绍 1.1. 简介 RocketMQ 是一款分布式.队列模型的消息中间件,具有以下特点: 能够保证严格的消息顺序 ...

  8. 架构师养成记--29.redis开篇

    主要有从下几点讲解 NOSQL(Redis) 简介.redis安装与部署 Redis基础事件类型详解 Redis高级命令 Redis与java的使用 Redis集群搭建 Redis集群与spring的 ...

  9. spring属性配置执行过程，单列和原型区别

    Spring配置中,采用属性注入时,当创建IOC容器时,也直接创建对象,并且执行相对应的setter方法 Student.java package com.scope; public class St ...

  10. lspci

    lspci 是一个用来显示系统中所有PCI总线设备或连接到该总线上的所有设备的工具. 列出所有的PCIE设备: lspci 选项: -v 使得 lspci 以冗余模式显示所有设备的详细信息. -vv ...