gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 13:28:57 25 4
gpt4 key购买 nike

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

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

所有特殊名称都应获得“good”CSS 类。其余的是“错误”css 类。

这是我尝试过的:

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

现在它没有醒来。在控制台中它给我 “脚本错误。(第 0 行)”

谢谢!

最佳答案

开箱即用的 CSS 绑定(bind)有点棘手。您指定类名,然后指定应用它的条件。

JSBIN

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

还有你的 View 模型:

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());

关于javascript - 使用 knockoutJS 中的函数将 CSS 添加到 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23502104/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com