0

この単純な CSS ノックアウト バインディングでは

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

C# 変数に移植class_1したいと思います。class_2これは私の最初の試みです：

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

これらのいずれもページのレンダリングをブロックしませんでしたが、最初の 2 つの結果として、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 に答える