Knockout: nest input element in label tag with data-bind properties
<p>I want to use the <code>label</code> tag without mapping the <code>for</code> attribute to the <code>input</code>'s <code>id</code> as described by <a href="http://www.w3.org/TR/html4/interact/forms.html#h-17.9.1" rel="nofollow noreferrer">w3c</a>. Like:</p>
<pre><code>&lt;label&gt;
    &lt;input type=&quot;...&quot;&gt;
&lt;/label&gt;
</code></pre>
<p>Now I try to get it work with <strong>knockout</strong>.</p>
<p>My Model:</p>
<pre><code>function myViewModel(data) {
    this.Name = &quot;Max&quot;;
    this.Value = &quot;1337&quot;;
}
</code></pre>
<p>My first approach was:</p>
<pre><code>&lt;label data-bind=&quot;text: Name&quot;&gt;
    &lt;input data-bind=&quot;value: Value&quot; /&gt;
&lt;/label&gt;
</code></pre>
<p><strong>But</strong> of course the <code>label</code> 's data binding overwrites its content. So no <code>input</code> will show up.</p>
<p>Demo: <a href="https://jsfiddle.net/f49c32zx/" rel="nofollow noreferrer">https://jsfiddle.net/f49c32zx/</a></p>
<p><strong>Question:</strong> How can I get this work?</p>
<p>I didn't tried putting the whole <code>input</code> element with all attributes and values as value of a property of my model - that doesn't give me a good feeling.</p>