Редактируемая таблица - Расширитель строк - 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

Измените привязку к элементу div с идентификатором treetable, а не к таблице изменений.

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

Вам следует применить привязку модели представления к самому внешнему контейнеру.