title: knockoutjs containerless if around <tr> and </tr>
body: <p>I am trying to build a table as follows, but I get "Error: Cannot find closing comment tag to match:  ko if: cellIsStartOfRow".</p>
  
  <p>Am I doing it wrong?</p>
  
  <pre><code>&lt;table&gt;
      &lt;tbody data-bind="foreach: MyDocs"&gt;
          &lt;!-- ko if: cellIsStartOfRow --&gt; 
              &lt;tr class="docsRow"&gt;
          &lt;!-- /ko --&gt;  
                  &lt;td&gt;
  
                        &lt;!-- There is more databinding in here - a div containing a textarea and also containing a hyperlink surrounding an image.  I think the contents are irrelevant to my question, but I can post if someone disagrees.--&gt;  
  
                  &lt;/td&gt; 
  
          &lt;!-- ko if: cellIsEndOfRow --&gt; 
              &lt;/ tr&gt;
          &lt;!-- /ko --&gt; 
  
     &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is the JS for the viewmodel.  The contents of the td above are somewhat simplified, because I thought it was fairly irrelevant what was in there.  I call the functions from other js on my page.  The viewmodel itself is assigned to a variable that is declared on the page.</p>
  
  <pre><code>Type.registerNamespace("HpDocs");
  
  
  HpDocs.DocsVM = function (data) {
      ko.mapping.fromJS(data, {}, this);
  
  
      // add additional properties to each document for presentation
      // purposes
      for (i = 0; i &lt; this.MyDocs().length; i++) {
          var myDoc = this.MyDocs()[i];
          myDoc.docObjectId = "docObject" + myDoc.Id();
          myDoc.textareaId = "ucHpDocs" + "_txta";
  
          if (i % 5 == 0) {
              myDoc.cellIsStartOfRow = true;
              myDoc.cellIsEndOfRow = false;
          } else if (i % 5 == 5) {
              myDoc.cellIsStartOfRow = false;
              myDoc.cellIsEndOfRow = true;
          } else {
              myDoc.cellIsStartOfRow = false;
              myDoc.cellIsEndOfRow = false;
          }
      }
  };
  
  HpDocs.DocsVM.prototype = {
  //    cellIsStartOfRow: function(){
  //        return true;
  //    },
      getDocs: function (filter) {
          var self = this;
          $.ajax({
              url: getMethodUrl("GetDocs"),
              data: "{'filter': " + filter + "}",
              success: function (response) {
                  ko.mapping.fromJS(response.d, {}, self.MyDocs);
              }
          })
      }
  };
  
  HpDocs.dbGetDocs = function (filter) {
      $.ajax({
          url: getMethodUrl("DbGetDocs"),
          data: "{'filter': " + filter + "}",
          success: function (response) {
  
              myDocsViewModel = new HpDocs.DocsVM({
                  MyDocs: ko.mapping.fromJS(response.d)
              });
  
              var bindingScope = $("#divMyDocs")[0];
              ko.applyBindings(myDocsViewModel, bindingScope);
  
              $(".DocsUpdateProgress").addClass("invisible");
          }
      })
  };
  
  
  HpDocs.getPreferredTab = function () {
      var tabPref = $("[id$='hidDocTabPreference']").html();
      return tabPref;
  };
  
  HpDocs.showProgress = function () {
      $(".DocsUpdateProgress").removeClass("invisible");
  };
  HpDocs.hideProgress = function () {
      $(".DocsUpdateProgress").addClass("invisible");
  };
  
  
  
  //register the class
  HpDocs.DocsVM.registerClass('HpDocs.DocsVM', null, Sys.IDisposable);
  
  
  // notify ajax that the script is now loaded.
  if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
  </code></pre>
  
  <h3>ANSWER</h3>
  
  <p>I refactored my model:  instead of having MyDocs contain a list of objects, I now have it containing a property called Rows which in turn contains a property called Documents.  Then, I can just do the following:</p>
  
  <pre><code>&lt;table id="tblMyDocs"&gt;
                  &lt;tbody data-bind="foreach:  MyDocs.Rows"&gt;
  
                          &lt;tr data-bind="foreach: Documents"&gt;
                                    &lt;td&gt;
                                            &lt;!-- in here i present each document by databinding to the Model's properties --&gt;
                                    &lt;td&gt;
                          &lt;/tr&gt;
                   &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>and of course the viewmodel is much easier, since the model is now organized in rows:</p>
  
  <pre><code>HpDocs.DocsVM = function (data) {
      ko.mapping.fromJS(data, {}, this);
  };
  
  HpDocs.DocsVM.prototype = {
      getDocs: function (filter) {
          var self = this;
          $.ajax({
              url: getMethodUrl("GetDocs"),
              data: "{'filter': " + filter + "}",
              success: function (response) {
                  ko.mapping.fromJS(response.d, {}, self.MyDocs);
              }
          })
      }
  };
  
  HpDocs.dbGetDocs = function (filter) {
      $.ajax({
          url: getMethodUrl("DbGetDocs"),
          data: "{'filter': " + filter + "}",
          success: function (response) {
  
              myDocsViewModel = new HpDocs.DocsVM({
                  MyDocs: ko.mapping.fromJS(response.d)
              });
  
              var bindingScope = $("#divMyDocs")[0];
              ko.applyBindings(myDocsViewModel, bindingScope);
  
              HpDocs.hideProgress();
          }
      })
  };
  </code></pre>