Question

如何将afterRender添加到这两件事并在javascipt代码中调用它：

<!-- ko foreach: columns -->
        <th data-bind="atrr: {'class': 'queue-row-' + $data}">
          <!-- ko if: $parent.isSortableColumn($data) -->
            <i class="fa fa-sort"
               data-bind="click: function() { $parent.toggleSortBy($data) }"></i>
          <!-- /ko -->

<tr data-bind="css: {
                       selectedFile: selected,
                       activeFile: $parent.activeQueueFile() == $data,
                    }, attr: {'data-queue-file' : $data.id() }">

添加到makeTreeTable to foreach。它没有做任何事情：

<tbody data-bind="foreach: {
                        data: visibleQueueFiles,
                        beforeRemove: hideQueueFileElement,
                        afterAdd: showQueueFileElement, 
                        afterRender: showAfterRender,
                        makeTreeTable: itemsThatTriggerUpdate
                      }">
      <tr data-bind="css: {
                       selectedFile: selected,
                       activeFile: $parent.activeQueueFile() == $data,
                    }, attr: {'data-queue-file' : $data.id() }">



        <td>
          <button type="button" class="btn btn-default btn-xs"
                  data-bind="click: editFile">
            Edit
          </button>


          <a data-bind="click: function() { showInViewer() }"
             class="btn btn-default btn-xs">View</a>

          <span
                data-bind="text: filename,
                           style: {
                           'display' : 'inline-block',
                           'text-decoration': moved() ? 'line-through' : ''
                           }
                           ">

          </span>


          <span data-bind="if: moved">
            Moved to <span data-bind="text: moved_to_qid"></span>
          </span>

          <span data-bind="if: owner">
            <i class="fa fa-lock"></i>
          </span>

          <span data-bind="if: isNew">
            <i class="fa fa-plus"
               title="File added to queue"></i>
          </span>


        </td>

        <!-- ko foreach: $parent.columns -->
        <td class="qid"
            data-bind="text: $parent.displayForColumn($data),
                       attr: { 'title' : $parent.titleForColumn($data) }">
        </td>
        <!-- /ko -->


      </tr>
    </tbody>

  </table>

将此添加到Javascript文件中。它没有向控制台返回任何内容：

ko.bindingHandlers.makeTreeTable = {

          update: function(element, valueAccessor) {

                 console.log('1');

                 ko.unwrap(valueAccessor());

                 console.log('2');

                 treeTable(element.parentNode());

                 console.log('3');

         }


         };

           this.itemsThatTriggerUpdate = ko.pureComputed(function(){

             console.log('4');

            ko.utils.arrayForEach(this.items, function(item) {

            console.log('5');

            item.id();

            console.log('6');

           });

         return{};

         }, this);

Answer 1

我有类似的需求，在foreach绑定完成后运行代码。这是我做的：

<tbody id="datasetbody" data-bind="foreach: items, makeTreeTable: itemsThatTriggerUpdate">
    <!-- content -->
</tbody>

结合：

ko.bindingHandlers.makeTreeTable = {
    update: function(element, valueAccessor) {
        ko.unwrap(valueAccessor());     // just need a subscription
        treeTable(element.parentNode /* the table element */);
    }
};

式计算：

this.itemsThatTriggerUpdate = ko.pureComputed(function () {
    ko.utils.arrayForEach(this.items(), function(item) {
        //unwrap properties that cause an update
        item.id(), /*...*/;
    });
    return {};
}, this);

Javascript淘汰如何添加afterRender

1 个答案: