Question

我想尝试这样做。它是一个有效的语法？我正在检查一些标志值并切换b / w两个css类？

<div data-bind="visible:'anchorJobContractor'===JobDetail_SelctedTab(), css:IsTabsCollapsed ? TabCollapsed : TabExpanded"></div>

第一部分可见的dataBinding对我有用。

Answer 1

这是 css 绑定的一种可能语法：

<div data-bind="css: { TabCollapsed: IsTabsCollapsed, TabExpanded: !IsTabsCollapsed() }"></div>

另见文档：http://knockoutjs.com/documentation/css-binding.html

Answer 2

你能尝试在这样的大括号内包含CSS的逻辑：

<div data-bind="visible:'anchorJobContractor'===JobDetail_SelctedTab(), css: { IsTabsCollapsed ? TabCollapsed : TabExpanded }"></div>

或者您可以将逻辑移动到您的javascript中，而不是通过使用计算值在HTML中执行。

viewModel.myCssClass = ko.computed(function() {
    return IsTabsCollapsed ? "TabCollapsed" : "TabExpanded";
}, viewModel);


<div data-bind="visible:'anchorJobContractor'===JobDetail_SelctedTab(), css: myCssClass"></div>

Answer 3

如果IsTabsCollapsed是一个可观察的，你必须这样做：

IsTabsCollapsed() ? TabCollapsed : TabExpanded

Answer 4

您可以将CSS绑定与此类计算的observable一起使用。

<div data-bind="css: TabClass">
   ...
</div>

<script type="text/javascript">
    var viewModel = {
        IsTabsCollapsed: ko.observable(false);
    };
    viewModel.TabClass = ko.computed(function() {
        return this.IsTabsCollapsed() ? "TabCollapsed " : "TabExpanded";
    }, viewModel);
</script>

这不是实现你想要的最小和最干净的方式，但它很容易管理和改变，而且非常容易理解。

Answer 5

免责声明：快速而肮脏的版本

我需要一种快速而又脏的方法将类应用于调试面板，并提出以下建议。

我建议这个版本仅用于调试，它只适用于你也使用jQuery。

<div class="debug-only knockout-debug-panel" 
            data-bind="click: function(data, event) { $(event.currentTarget).toggleClass('transparent'); }">

</div>

.transparent { opacity: .5; }

Knockout有一个函数toggleDomNodeCssClass，但不幸的是它需要一个布尔值来添加或删除该类。

使用knockout切换css类

5 个答案: