Question

我正在尝试在knockoutJS中实现CSS绑定。

我想一个接一个地打印名字数组中的所有名字。问题是有另一个数组有一些特殊名称。

所有特殊名称都应该得到＆＃34; good＆＃34; CSS类。其余的，＆＃34; bad＆＃34; css class。

以下是我尝试的内容：

HTML

 <!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>



  <div data-bind="foreach : items">
    <div data-bind="text: $data, css: checkName($data)" ></div>
  </div>


</body>
</html>

JAVASCRIPT

var dataModel = function(){

  self.items = ko.observableArray(["don","bom","harry","sharry","ron"]);
  self.names = ["ron","harry"];

  self.checkName = ko.observable(function(name){

    if( $.inArray(name,self.names) ){
            return "good";
        }
        else{
            return "bad";
        }
  });

};

ko.applyBindings(new dataModel());

FIDDLE - http://jsbin.com/difaluwo/2/edit

现在不是在开玩笑。在控制台中它给我"Script error. (line 0)"

谢谢！

Answer 1

开箱即用的CSS绑定有点棘手。您可以指定类名，然后指定应用它的条件。

JSBIN

<div data-bind="foreach : items">
    <div data-bind="text: $data, css: { good: isGoodName($data), bad: !isGoodName($data) }" ></div>
  </div>

你的观点模型：

var dataModel = function(){

  self.items = ko.observableArray(["don","bom","harry","sharry","ron"]);
  self.names = ["ron","harry"];

  self.isGoodName = function (name) {
    return $.inArray(name, self.names) !== -1;
  };

};

ko.applyBindings(new dataModel());

使用knockoutJS中的函数将CSS添加到div

1 个答案: