敲除：基于可观察

我使用的foreach可观察到的阵列上的值变更css类：敲除：基于可观察

<div id="mainRight" data-bind="foreach: notifications"> 
    <div class="statusRow"> 
     <div class="leftStatusCell"> 
      <div class="leftStatusCellColor" data-bind="css: availabilityCssClass($data.availability)"></div> 
     </div> 
     <div class="topRightStatusCell" data-bind="text: sip"></div> 
     <div class="bottomtRightStatusCell ellipsisSingleline" data-bind="text: note"></div> 
    </div> 
</div> <!== end mainRight ==>

正如你可以看到，我的可用性的电流值传递给函数availabilityCssClass，其值进行比较，以一些预定义的字符根据匹配的字符串，它返回一个类名。

self.availabilityCssClass = ko.computed(function (value) { 
    var availability = value; 
    if (availability === "Busy" || "DoNotDisturb" || "BeRightBack") 
     return "leftStatusCellColorOrange"; 
    else if (availability === "Away" || "Offline") 
     return "leftStatusCellColorRed"; 
    else 
     return "leftStatusCellColorGreen"; 
});

这是我的模型。数据来自外部数据源。

function Notification(root, sip, availability, note) { 
    var self = this; 

    self.sip = ko.observable(sip); 
    self.availability = ko.observable(availability); 
    self.note = ko.observable(note); 
}; 

self.notifications = ko.observableArray();

但是，它不起作用。当计算的函数未被注释掉时，foreach不会迭代数据，而div是空的。但是我可以看到viewModel不是空的。

来源

2012-11-19 mupersan82

你能提供一个小提琴，并描述什么是行不通的。 –

您正在使用哪个KO版本？ – nemesv

即时通讯使用2.2所以这个功能应该被支持，对吧？ – mupersan82

你不能通过值转换成这样的方式计算。这是更好地添加此计算为Notification视图模型，并使用self.availability属性：

function Notification(root, sip, availability, note) { 
    var self = this; 

    self.sip = ko.observable(sip); 
    self.availability = ko.observable(availability); 
    self.note = ko.observable(note); 

    self.availabilityCssClass = ko.computed(function() { 
     var availability = self.availability(); 

     if (["Busy", "DoNotDisturb", "BeRightBack"].indexOf(availability) != -1) return "leftStatusCellColorOrange"; 
     else if (["Away", "Offline"].indexOf(availability) != -1) return "leftStatusCellColorRed"; 
     else return "leftStatusCellColorGreen"; 
    }); 
};

你if说法是不正确的，所以我固定的逻辑。这里是工作提琴：http://jsfiddle.net/vyshniakov/Jk7Fd/

来源

2012-11-19 12:17:35

太棒了，谢谢！为什么我不能像我那样将值传递给计算函数？ if语句有什么问题？ – mupersan82

我不知道为什么，但传递值计算不起作用:)。在JavaScript中，你不能以这种方式比较价值。在你的代码中，如果可用性不是繁忙，那么'if'将总是返回true。 –

只要注意到每次可用性更改时便会覆盖注释值。我怎样才能避免这种情况？ – mupersan82

CSS的结合要文字与CSS类作为成员名称和值对要删除或添加的类别

data-bind="css: { 'css-class-name': true }"

真或假depeding的名称对象编辑：嗯，他们已经改变了CSS 2.2结合;）

来源

2012-11-19 12:17:59 Anders

你只需要做出availabilityCssClass功能。正如你写的那样，它不是一个可计算的观察值，因为它没有可观察的依赖关系。

self.availabilityCssClass = function (value) { 
    var availability = value; 
    if (availability === "Busy" || "DoNotDisturb" || "BeRightBack") 
     return "leftStatusCellColorOrange"; 
    else if (availability === "Away" || "Offline") 
     return "leftStatusCellColorRed"; 
    else 
     return "leftStatusCellColorGreen"; 
};

来源

2012-11-19 21:08:43

敲除：基于可观察

回答

相关问题