knockout 学习实例5 style

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div data-bind="style: { color: currentProfit() < 0 ? ‘red‘ : ‘black‘ }">
Profit Information
</div>
<script type="text/javascript">
var viewModel = {
currentProfit: ko.observable(150000)
};
viewModel.currentProfit(-50);
ko.applyBindings(viewModel);

//css 中如果想 font-style 需要这样写 fontStyle

// 对应表：
// http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html

</script>

</body>
</html>

时间： 2024-10-24 20:39:46

knockout 学习实例5 style的相关文章

knockout 学习实例4 css

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script> <style type

knockout 学习实例6 attr

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script> </head>

knockout 学习实例3 html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script> </head>

knockout 学习实例7 foreach

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script> </head>

knockout 学习实例2 text

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/knockout-3.4.0.js" type="text/javascript" charset="utf-8"></script> </head>

.Knockout学习笔记（五）

作为一名初学者来说,一篇篇的按顺序看官网上的文档的确是一件很痛苦的事情,毕竟它的排列也并非是由浅及深的排列,其中的顺序也颇耐人寻味,于是这篇文章我又跳过了Reference部分,进而进入到具体的bindings环节,首先接触到的是Controlling text and appearance. Visible binding会依据绑定的数据来决定相应的DOM元素是否隐藏. 我们首先在js文件部分定义一个view model,这里我创建的是一个object而不是一个构造函数,个人分析认为,obje

Knockout学习之文本和外观绑定器

文本和外观绑定器 “visible”绑定 该绑定主要用来让我们通过监控属性可以控制html文档的显示,只要绑定的监控属性为false.0.null或者undefined则隐藏该标签,否则显示.比如下面的示例: 1 <span data-bind="visible:visibleState">显示了</span> 2 <div> 3 <button type="button" data-bind="click:sho

Knockout学习笔记（三）

之前的文章主要针对的是单一的observable(即便是observableArray也是一种observable),而文档Using computed observables则主要是针对ko.computed这一function,它能够将多个observable联系起来,无论这些observable中的哪个发生了变化,ko.computed也会发生相应的变化并将结果反应在UI中. 首先,创建一个view model如下: 1 function MyViewModel() { 2 this.fi

Knockout学习之（1）

监控属性 Knockout包含以下三个核心特性: 1.监控属性和依赖跟踪 2.显式绑定 3.模板 下面我们将学习这三点中的第一点,在这之前我们先研究下MVVM模式和视图模型的概念. MVVM和视图模型 模型:用来存储应用中的数据.它处于业务领域中,并且包含了相关的属性以及操作,与用户界面独立.在使用OK时,你将经常使用ajax保持该模型与服务端同步. 视图模型:使用纯代码表示界面的数据和操作.比如,你要实现一个列表编辑功能,那么你的视图模型就需要维持一组数据项,同时还要提供添加和删除方法. 视图