razor中的Knockout数据绑定语法

时间:2013-11-14 16:04:38

标签: asp.net-mvc visual-studio-2012 razor knockout.js

在这个简单的CSS Knockout绑定

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

我想将class_1class_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似乎有点过于侵略性:是否有类似的东西可以解决这个问题?

3 个答案:

答案 0 :(得分: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>
}

答案 1 :(得分: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 }" />

答案 2 :(得分:-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" />