Question

在这个简单的CSS Knockout绑定

中

<tag data-bind="css: { 'class_1': condition1, 'class_2': condition2 }" />

我想将class_1和class_2移植到C＃变量。这是我的第一次尝试：

<tag data-bind="css: { '@class1': condition1, '@class2': condition2 }" />

其他尝试导致我必须声明一个包含绑定语句的单独变量。

string bind = string.Format("'{0}': condition1, '{1}': condition2", class1, class2)
<tag data-bind = "css: { @bind }" />

，最后：

string bind = string.Format("css: {{ '{0}': condition1, '{1}': condition2 }}", class1, class2)
<tag data-bind = "@bind" />

这些都没有阻止页面的呈现，但前两个结果是Visual Studio指示语法错误。我想做这个绑定：

无需使用单独的变量
在Visual Studio 2012中没有出现任何语法错误（和拧紧代码崩溃）

有可能吗？

最后一个例子是唯一一个没有给出语法错误的例子，它牺牲了代码的可读性，特别是对于较大的语句。有没有其他看起来更像我的第一次尝试？淘汰MVC似乎有点过于侵略性：是否有类似的东西可以解决只这个问题？

Answer 1

我的机器上没有安装VS 2012，但VS 2013的语法高亮显示接受此代码：

<style>
    .myClass {
        color: red;
    }
</style>

@{
    var MyClass = "myClass";
}

<div id="fooId">
    <span data-bind="css: { '@MyClass': enableClass }, text: myText"></span>
</div>

@section scripts{    
    <script>
        var vm = {
            enableClass: ko.observable(true),
            myText: ko.observable('foobarbaz')
        };
        ko.applyBindings(vm, document.getElementById('fooId'));
    </script>
}

Answer 2

我认为你要找的是这样的：

class1 = @Model.CssClass1;
class2 = @Model.CssClass2;

var viewModel = function(class1, class2) {
    self = this;

    self.classOne= ko.observable(class1);
    self.classOne= ko.observable(class2);

    self.condition_1 = // something
    self.condition_2 = // something
};

ko.applyBindings(new viewModel (class1, class2));

然后只需应用第一个示例中显示的绑定：

<tag data-bind="css: { classOne : condition1, classTwo: condition2 }" />

Answer 3

@Saturnix，因为你说类值只是从服务器变量，你可以 - 并且可能应该 - 保持类变量不在你的KO模型中。这就是我的想法：

@{ 
var class1 = Model.condition1 ? 'class1' : '';
var class2 = Model.condition2 ? 'class2' : '';
}
<input data-bind="value: myValue" class="@class1 @class2" />

或者，您可以通过修改视图模型直接包含类变量来简化视图。如：

public class MyViewModel
{
    public bool Condition1 {get; set;}
    public bool Condition2 {get; set;}
    public string Class1 
    {
        get { return Condition1 ? 'class1' : ''; }
    }
    public string Class2
    {
        get { return Condition2 ? 'class2' : ''; }
    }
}

<input data-bind="value: myValue" class="@Model.Class1 @Model.Class2" />

甚至：

public class MyViewModel
{
    public bool Condition1 {get; set;}
    public bool Condition2 {get; set;}
    public string classes 
    {
        get 
        { 
            var classes = new List<string>();
            if (Condition1) classes.Add("class1");
            if (Condition2) classes.Add("class2");
            return string.Join(",", classes);
        }
    }
    public string Class2
    {
        get { return Condition2 ? 'class2' : ''; }
    }
}
<input data-bind="value: myValue" class="@Model.classes" />

razor中的Knockout数据绑定语法

3 个答案: