title: Dynamic template controls in knockout.js with add/remove functionality
body: <p>Better if I explain this splitting. 
  The first one: I have to add and remove a line of controls (it's working)
  The second one: Depending on a selected option in a control, I have to show different options or controls. (it's working also with templates).</p>
  
  <p>The problem is to make both of them work together. Each time I add a line, then select an option, then show the option/control/text, and then be able to remove also that line.</p>
  
  <p>Thanks in advance.</p>
  
  <pre><code>HTML:
  
  &lt;table data-bind="foreach: fLines"&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;select data-bind="options: formatValues, value: type"&gt;&lt;/select&gt;
          &lt;/td&gt;
          &lt;td data-bind="template: type"&gt;&lt;/td&gt;
          &lt;td&gt;
              &lt;a href="#" data-bind='click: $parent.removefLine'&gt;Remove&lt;/a&gt;
          &lt;/td&gt; 
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;button style="background-color: transparent; border: none;" data-bind="click: addfLine()"&gt;Add Format&lt;/button&gt;
  
  &lt;script id="A" type="text/html"&gt;
      &lt;input data-bind="value: value1" /&gt; 
  &lt;/script&gt;
  
  &lt;script id="B" type="text/html"&gt;
      &lt;span&gt;removes leading and trailing spaces&lt;/span&gt;
  &lt;/script&gt;
  
  &lt;script id="C" type="text/html"&gt;
  &lt;/script&gt;
  
  KO:
  
  var formatValues = ["A", "B", "C"];
  
  var Item = function(format) {
      var self = this;
      self.type = ko.observable(format);
      self.value1 = ko.observable();
  };
  
  var Formatters = {
      fLines: [ new Item("C") ],
      addfLine: function(){fLines.push(new Item("C"))}
  };
  
  
  ko.applyBindings(Formatters);
  </code></pre>