你的位置:首页 > Java教程

[Java教程]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="text/css" media="screen">    .profitWarning{font-size:20px;color:#f00;}  </style></head><body><div data-bind="css: { profitWarning: currentProfit() < 0 }">  Profit Information</div> <script type="text/javascript">  var viewModel = {    currentProfit: ko.observable(150000)   };    ko.applyBindings(viewModel);  setTimeout(function(){    viewModel.currentProfit(-50);   },2000)</script> </body></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>  <style type="text/css" media="screen">    .profitWarning{font-size:20px;color:#f00;}    .profitPositive{font-size:30px;color:#0f0;}  </style></head><body><div data-bind="css: profitStatus">  Profit Information</div> <script type="text/javascript">  var viewModel = {    currentProfit: ko.observable(150000)  };   viewModel.profitStatus = ko.pureComputed(function() {    return this.currentProfit() < 0 ? "profitWarning" : "profitPositive";  }, viewModel);   viewModel.currentProfit(-50);  ko.applyBindings(viewModel);  setTimeout(function(){    viewModel.currentProfit(50);  },2000);</script> </body></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>  <style type="text/css" media="screen">    .profitWarning{font-size:20px;color:#f00;}    .profitPositive{font-size:30px;color:#0f0;}  </style></head><body><div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }"> <script type="text/javascript">// div css 当currentProfit小于0时 class中有profitWarning//div css 当isSevere等于真时 class中有majorHighlight  var viewModel = {    currentProfit: ko.observable(150000),    isSevere:true  };   viewModel.currentProfit(-50);  ko.applyBindings(viewModel);</script> </body></html>

css绑定时,如果用my-class会报错,如果非要用就需要加引号

<!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="text/css" media="screen">    .profitWarning{font-size:20px;color:#f00;}    .profitPositive{font-size:30px;color:#0f0;}  </style></head><body><div data-bind="css: { my-class: someValue }">...</div> <script type="text/javascript">//会报错  var viewModel = {    someValue:true  }; ko.applyBindings(viewModel);</script> </body></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>  <style type="text/css" media="screen">    .profitWarning{font-size:20px;color:#f00;}    .profitPositive{font-size:30px;color:#0f0;}  </style></head><body><div data-bind="css: { 'my-class': someValue }">...</div> <script type="text/javascript">//不会报错  var viewModel = {    someValue:true  }; ko.applyBindings(viewModel);</script> </body></html>