可编辑的表 - 行扩展器 - Javascript / OJET

Question

我正在尝试在JS和OJET元素中实现一个带有行扩展器的可编辑表。我正在使用knockout.js而且我有一个未被发现的错误：

  

“未捕获错误：您无法多次将绑定应用于同一元素。”

我不明白这个错误，我误解了。

以下是我的JS和HTML文件：

          function TreeTableContentViewModel() {
                var self = this;
                var newJson = [];
                //var file  = jQuery.getJSON(file);
                var options= [];
                self.datasource = ko.observable();

                

                //// EDITABLE
                self.rowRenderer = function(context)
                {
                    var mode = context['rowContext']['mode'];        
                    if (mode === 'edit') {
                        return oj.KnockoutTemplateUtils.getRenderer('row_template_editable', true)(context);
                    }
                    else if (mode === 'navigation')
                    {
                        return oj.KnockoutTemplateUtils.getRenderer('row_template', true)(context);
                    }
                };

                self.beforeRowEditEndListener = function(event)
                {
                    var data = event.detail;
                    var rowIdx = data.rowContext.status.rowIndex;
                    self.datasource().at(rowIdx).then(function(rowObj)
                    {
                        $('#rowDataDump').val(JSON.stringify(rowObj['data']));  
                    });
                    return oj.DataCollectionEditUtils.basicHandleRowEditEnd(event, data);
                }

                ////////


                $.getJSON("https://api.********",
                        function (data)
                        {
                            var treeData = [];
                            createSubLines(data, treeData);
                            sumTab(treeData, "nbPieces");
                            sumTab(treeData, "nbEmballages");
                            sumRan(treeData);
                            sumCommandes(treeData);

                            self.datasource(new oj.FlattenedTreeTableDataSource(new oj.FlattenedTreeDataSource(new oj.JsonTreeDataSource(treeData), options)));
                        }
                );


            }


            $(
                function() 
                {
                    var vm = new TreeTableContentViewModel();
                    ko.applyBindings(vm, document.getElementById('table'));
                }
            )

<div class="treetable">
  <oj-table id="table" aria-label="Tasks Table" data="[[datasource]]" 
  row-renderer='[[oj.KnockoutTemplateUtils.getRenderer("row_template", true)]]'
  edit-mode='rowEdit'
  on-oj-before-row-edit-end="[[beforeRowEditEndListener]]"
    dnd='{"reorder": {"columns": "enabled"}}' scroll-policy='loadMoreOnScroll' 
    scroll-policy-options='{"fetchSize": 10}' selection-mode='{"row": "multiple", "column": "multiple"}'
    
    columns='[{"headerText": "ID Lieu Origine", "sortProperty": "idLieuOrigine","resizable": "enabled"},
                    {"headerText": "ID Lieu Destination", "sortProperty": "idLieuDestination","resizable": "enabled"},
                    {"headerText": "Date/Heure de mise à disposition", "sortProperty": "dateHeureDisposition","resizable": "enabled"},
                    {"headerText": "ID de la commande", "sortProperty": "idCommande","resizable": "enabled"},
                    {"headerText": "Article Reference", "sortProperty": "articleReference","resizable": "enabled"},
                    {"headerText": "Article (reference externe)", "sortProperty": "articleReferenceExterne","resizable": "enabled"},
                    {"headerText": "RAN", "sortProperty": "ran","resizable": "enabled"},
                    {"headerText": "Nombre Pièces", "sortProperty": "nombreDePiCes","resizable": "enabled"},
                    {"headerText": "Nombre Emballages", "sortProperty": "nbEmballages","resizable": "enabled"},
                    {"headerText": "Code UC/UM", "sortProperty": "codeUCUCM","resizable": "enabled"},
                    {"headerText": "Code UM", "sortProperty": "codeUM","resizable": "enabled"}]' style='width: 95%; height: 300px;'>
  </oj-table>
</div>
<textarea id="rowDataDump" style="height: 200px; width: 300px; box-sizing: border-box;"></textarea>

<script type="text/html" id="row_template">
            <tr>
              <td>
                <oj-row-expander context="[[$context.rowContext]]"></oj-row-expander>
                <span data-bind="text: idLieuOrigine"></span>
              </td>
              
               <td>
                <span data-bind="text: nbEmballages"></span>
              </td>
               <td>
                <span data-bind="text: codeUCUCM"></span>
              </td>
               <td>
                <span data-bind="text: codeUM"></span>
              </td>
              
              
            </tr>
        </script>
        <script type="text/html" id="row_template_editable">
          <tr>
            <td>
              <oj-row-expander context="[[$context.rowContext]]"></oj-row-expander>
              <span data-bind="text: idLieuOrigine"></span>
            </td>
           
             <td>
              <span data-bind="text: codeUCUCM"></span>
            </td>
             <td>
              <span data-bind="text: codeUM"></span>
            </td>
            
            
          </tr>
      </script>

感谢您的帮助！

Answer 1

将绑定更改为ID为'treetable'的div元素，而不更改为jet表。

ko.applyBindings(vm, document.getElementById('treetable'));

您应该将视图模型绑定应用于最外面的容器。