razor 中的敲除数据绑定语法

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（和 搞砸代码崩溃）

有可能吗？

最后一个例子，唯一没有给出语法错误的例子，牺牲了代码的可读性，尤其是对于较大的语句。有没有其他看起来更像我的第一次尝试的选择？ Knockout 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" />