使用普通变量为淘汰js设置css属性答案

【问题标题】：Setting a css property using a normal variable for knockout js使用普通变量为淘汰js设置css属性
【发布时间】：2016-11-22 05:41:48
【问题描述】：

我想使用 if 条件使用普通变量而不是 observables 来设置 css 属性。喜欢：

a.html 文件：

<span class="label" data-bind="text: isApproved, css: sampleglobalvar == true ? 'label-success' : 'label-important'"></span>

a.js 文件：

编辑：

define('durandal/app'],function(app) {
   var a = function() {

    sampleglobalvar = 'true'
    };
}

我收到一个错误，例如 viewmodel 中不存在“sampleglobalvar”。我知道必须使用 observable ，但是我在 observable 中存在其他问题，在“true”和“false”之间切换对于 observables 正在制造问题：

如果我使用：

sampleglobalvar = ko.observable("");

设置：

if(//condition)
{

sampleglobalvar(true);
}
else
{
sampleglobalvar(false);
}

没有正确清除 observable，因此我得到了不同的结果。

总结一下是否可以使用普通的 javascript 变量在 css 数据绑定属性中使用它？

【问题讨论】：

你把'sampleglobalvalue'放在一个匿名函数中，使它成为一个非全局的......

标签： javascript html css knockout.js

【解决方案1】：

是的，完全有可能。对于真正的全局（即window 上的内容），您需要在数据绑定中限定变量的范围。

例子：

function RootViewModel() {  
  // Plain property on the "global" (i.e. Root) view model:
  this.plainProp = true;
  
  // True "global" variable:
  window.myGlobal = true;
}

ko.applyBindings(new RootViewModel());

.error { background: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>

<p data-bind="css: plainProp === true ? 'error' : 'plain'">Root plain prop</p>
<p data-bind="css: window.myGlobal === true ? 'error' : 'plain'">Global plain prop</p>

您在问题的组合中包含了函数范围和模块加载器（requirejs？），但只要您为该确切场景确定了正确的范围，它应该类似于我的示例。如果您对那个特定位有疑问，我建议您再问一个问题，包括 Minimal Repro（即比当前问题更多（并且在语法上有效）的代码）。

【讨论】：