Question

我想使用if条件使用除observable之外的普通变量来设置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'
    };
}

我收到一个错误，例如'sampleglobalvar'在viewmodel中不存在。我知道必须使用一个observable，但是我有其他问题，可以在'true'和'false'之间切换对于可观察者来说是在制造问题：

如果我使用：

sampleglobalvar = ko.observable("");

设置：

if(//condition)
{

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

没有正确清理观察结果，因此我得到了不同的结果。

总结是否可以使用普通的javascript变量在css data-bind属性中使用它？

Answer 1

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

示例：

＆＃13;

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

＆＃13;

.error { background: red; }

＆＃13;

<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>

＆＃13;

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

使用正常变量为knockout js设置css属性

1 个答案: