title: Knockout component different template - gridstack.js
body: <p>Following and example from gridstack.js and implemented here:</p>
  
  <p><a href="http://jsfiddle.net/m3qj3qs1/1/" rel="nofollow">http://jsfiddle.net/m3qj3qs1/1/</a></p>
  
  <p>html:</p>
  
  <pre><code> &lt;div class="container-fluid"&gt;
          &lt;h1&gt;knockout.js Demo&lt;/h1&gt;
  
          &lt;div&gt;
              &lt;button data-bind="click: add_new_widget"&gt;Add new widget&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;br&gt;
  
          &lt;div data-bind="component: {name: 'dashboard-grid', params: $data}"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
  
  
      &lt;template id="gridstack-template"&gt;
          &lt;div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}"&gt;
             &lt;div class="grid-stack-item" data-bind="attr: {'data-gs-x': $data.x, 'data-gs-y': $data.y, 'data-gs-width': $data.width, 'data-gs-height': $data.height, 'data-gs-auto-position': $data.auto_position}"&gt;
                 &lt;div class="grid-stack-item-content"&gt;&lt;button data-bind="click: $root.delete_widget"&gt;Delete me&lt;/button&gt;&lt;/div&gt;
             &lt;/div&gt;&lt;/div&gt;&lt;!-- &lt;---- NO SPACE BETWEEN THESE CLOSING TAGS --&gt;
      &lt;/template&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>    ko.components.register('dashboard-grid', {
          viewModel: {
              createViewModel: function (controller, componentInfo) {
                  var ViewModel = function (controller, componentInfo) {
                      var grid = null;
  
                      this.widgets = controller.widgets;
  
                      this.afterAddWidget = function (items) {
                          if (grid == null) {
                              grid = $(componentInfo.element).find('.grid-stack').gridstack({
                                  auto: false
                              }).data('gridstack');
                          }
  
                          var item = _.find(items, function (i) { return i.nodeType == 1 });
                          grid.add_widget(item);
                          ko.utils.domNodeDisposal.addDisposeCallback(item, function () {
                              grid.remove_widget(item);
                          });
                      };
                  };
  
                  return new ViewModel(controller, componentInfo);
              }
          },
          template: { element: 'gridstack-template' }
      });
  
      $(function () {
          var Controller = function (widgets) {
              var self = this;
  
              this.widgets = ko.observableArray(widgets);
  
              this.add_new_widget = function () {
                  this.widgets.push({
                      x: 0,
                      y: 0,
                      width: Math.floor(1 + 3 * Math.random()),
                      height: Math.floor(1 + 3 * Math.random()),
                      auto_position: true
                  });
              };
  
              this.delete_widget = function (item) {
                  self.widgets.remove(item);
              };
          };
  
          var widgets = [
              {x: 0, y: 0, width: 2, height: 2},
              {x: 2, y: 0, width: 4, height: 2},
              {x: 6, y: 0, width: 2, height: 4},
              {x: 1, y: 2, width: 4, height: 2}
          ];
  
          var controller = new Controller(widgets);
          ko.applyBindings(controller);
      });
  </code></pre>
  
  <p>In the example are 4 widgets loaded (array) and one template defined and a knockout component.</p>
  
  <p>How can I specify different templates for different widgets? Example for each widget one template?</p>