css绑定中的自定义类名

Custom class name in css binding

本文关键字：自定义 绑定 css      更新时间：2023-09-26

我有一个这样的可观察数组：

arrayName =  ko.observableArray([
    {name: First Name, type: normal},
    {name: Second Name, type: low},
    {name: Third Name, type: high}]);

并想将我的DOM元素的类设置为这样：

<div data-bind="foreach: arrayName">
    <div data-bind="text: name"> </div>
    <div data-bind="css: type"> </div>
</div>

有人知道如何让它成为可能吗？

尝试使用这个：

JSFiddle 中的示例

HTML:

<div data-bind="foreach: arrayName">
<div data-bind="text: name, css: type"> </div>
</div>

脚本：

var myModel = function() {
   this.arrayName =  ko.observableArray([
     {name: "First Name", type: "normal"},
     {name: "Second Name", type: "low"},
     {name: "Third Name", type: "high"}]);

}


ko.applyBindings(new myModel());

首先，类的所有值都应该在字符串表示中定义。

您将类（在您的示例中）添加到空的div中，该div没有任何内容，您看不到它，如果我理解正确，您应该将该类添加到添加name属性的同一div中。

HTH。

您的示例有效，只需要为每个属性的字符串添加引号：

<div data-bind="foreach: arrayName">
    <div data-bind="text: name"> </div>
    <div data-bind="css: type"> </div>
</div>
<script>
    function vm (){
      this.arrayName =  ko.observableArray([
        {name: "First Name", type: "normal"},
        {name: "Second Name", type: "low"},
        {name: "Third Name", type: "high" }]);         
    }
    ko.applyBindings(new vm());
</script>
相关文章：