title: Knockout data-bind syntax in razor
body: <p>In this simple CSS Knockout binding</p>
  
  <pre><code>&lt;tag data-bind="css: { 'class_1': condition1, 'class_2': condition2 }" /&gt;
  </code></pre>
  
  <p>I'd like to port <code>class_1</code> and <code>class_2</code> to C# variables. This is my first attempt:</p>
  
  <pre><code>&lt;tag data-bind="css: { '@class1': condition1, '@class2': condition2 }" /&gt;
  </code></pre>
  
  <p>Other attempts resulted in me having to declare a separate variable containing the binding statement.</p>
  
  <pre><code>string bind = string.Format("'{0}': condition1, '{1}': condition2", class1, class2)
  &lt;tag data-bind = "css: { @bind }" /&gt;
  </code></pre>
  
  <p>and, finally:</p>
  
  <pre><code>string bind = string.Format("css: {{ '{0}': condition1, '{1}': condition2 }}", class1, class2)
  &lt;tag data-bind = "@bind" /&gt;
  </code></pre>
  
  <p>None of these blocked the rendering of the page but the first two results in Visual Studio indicating a syntax error.
  I'd like to do this bind:</p>
  
  <ul>
  <li>Without the need to istanciate a separate variable</li>
  <li>Without any syntax error popping out in Visual Studio 2012 (and
  screwing up code collapsing)</li>
  </ul>
  
  <p>Is it possible?</p>
  
  <p>The last example, the only one which doesn't give syntax errors, sacrifies code readability, especially for larger statements. Is there any alternative which looks more like my first attempt? Knockout MVC seems a little bit too invasive: is there something similar but which can solve <em>only</em> this issue?</p>