title: Client-side code/presentation separation in a content templatized server-side
body: <p>I came to a situation where a great principle of separation of code and presentation produces a problem in web-application development, where there exist two separate parts: client and server. I'm not sure how to adhere to this principle on both ends simultaneously without tricks.</p>
  
  <p>Consider an example with a server-side template, generating a client-side web-page (<code>view</code>), which should be aware of server-side <code>model</code> parameters, so that they can be send back to server. For example, it could look something like that:</p>
  
  <pre><code>&lt;!-- File: form.template --&gt;
  &lt;form id="main" name="main"&gt;
  &lt;input type="button" id="do" class="buttons" value="Do" onclick="requestDoFor(%modelid%)"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Such a template is used on server with proper separation from code (for instance, in php, using an abstract template engine):</p>
  
  <pre><code>$templateEngine-&gt;create('form.template', array('modelid' =&gt; $value))-&gt;render();
  </code></pre>
  
  <p>The problem is that the template does not conform to code separation principle on client-side. The generated view should be actually free from any JavaScript, that is the <code>onclick</code> handler should go from the template:</p>
  
  <pre><code>&lt;input type="submit" id="do" class="buttons" value="Do" /&gt;
  </code></pre>
  
  <p>to a separate JavaScript file:</p>
  
  <pre><code>$('#do').click(function(){requestDoFor(%modelid%);});
  </code></pre>
  
  <p>The question is how to pass model parameters to this part of the client, which is not the <code>view</code> (in fact, this is a client-side part of <code>controller</code>), and is not generated by server-side template engine? I could imagine a quick workaround in the template:</p>
  
  <pre><code>&lt;input type="submit" id="do" class="buttons" value="Do" objectid="%modelid%" /&gt;
  </code></pre>
  
  <p>and something like that in JavaScript:</p>
  
  <pre><code>$('#do').click(function(event){requestDoFor($(event.target).attr('objectid'))});
  </code></pre>
  
  <p>But it does not look perfect. Is there a better way?</p>
  
  <p>I know some people generate views entirely as JavaScript, which in turn generates DOM elements in browser, but this approach has its own drawbacks. What else can be suggested?</p>