0

在这个简单的 CSS Knockout 绑定中

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

我想移植class_1和class_2C# 变量。这是我的第一次尝试：

<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 似乎有点过于侵入性：有没有类似的东西，但只能解决这个问题？

4

3 回答 3

2

我的机器上不再安装 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>
}
于 2013-11-14T23:58:29.317 回答
0

我认为您正在寻找的是这样的：

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 }" />
于 2013-11-14T16:42:27.877 回答
-1

@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" />
于 2013-11-14T17:23:37.613 回答