使用Marionette Backbone.js渲染视图后，获取计算的CSS属性(例如:宽度）

Getting the calculated CSS attributes (ex: width) after view is rendered using Marionette Backbone.js

本文关键字：属性 CSS 例如 宽度 计算 获取 js Backbone Marionette 视图 使用      更新时间：2023-09-26

我已经基于纯javascript程序逻辑创建了一个固定的页眉/页脚表。

基本上，在加载页面后，我所做的是将原始表拆分为另外3个表，每个表都包含它的一部分，如下所示：thead、tbody和tfoot。

作为参考，工作代码如下：（很抱歉代码语句太长，但我认为，由于它运行良好，这对其他人可能有用）

$(window).load(function() {
  var mainTable = $('.table-scroll');
  // outer contrainer
  var tableOuterContainer = $('<div id="table-outer-container"></div>');
  $(mainTable).after(tableOuterContainer);
  // table header
  var theadCopy = detachTableHeader();
  $(tableOuterContainer).append(theadCopy);
  //table body
  var tableContainer = $('<div id="table-inner-container"></div>');
  $(tableContainer).css('height', '300px');
  $(tableContainer).css('overflow-y', 'auto');
  $(tableContainer).append(mainTable);
  $(tableOuterContainer).append(tableContainer);
  var tfootCopy = detachTableFooter();
  $(tableOuterContainer).append(tfootCopy);
  function detachTableHeader() {
    var clone = $(mainTable).clone();
    $(clone).find('tbody').remove();
    $(clone).find('tfoot').remove();
    $(mainTable).find('thead').remove();
    return clone;
  }
  function detachTableFooter() {
    var clone = $(mainTable).clone();
    $(clone).find('thead').remove();
    $(clone).find('tbody').remove();
    $(mainTable).find('tfoot').remove();
    return clone;
  }
  function adjustTableHeaderWidth() {
    var tbodyColumns = $(mainTable).find('tbody tr:first').children();
    var theadColumns = $(theadCopy).find('thead tr').children();
    var width;
    $(theadColumns).each(function(i, v) {
      width = Math.round($(tbodyColumns[i]).width());
      if (i + 1 < $(theadColumns).length) {
        $(v).width(width);
        $(tbodyColumns[i]).width(width);
      }
    });
    $(theadCopy).css('margin-bottom', '0');
    $(theadCopy).css('border-bottom', '0');
  }
  function adjustTableFooterWidth() {
    var tbodyColumns = $(mainTable).find('tbody tr:first').children();
    var tfootColumns = $(tfootCopy).find('tfoot tr').children();
    var width;
    $(tfootColumns).each(function(i, v) {
      width = Math.round($(tbodyColumns[i]).width());
      if (i + 1 < $(tfootColumns).length) {
        $(v).width(width);
        $(tbodyColumns[i]).width(width);
      }
    });
    $(mainTable).css('margin-bottom', '0');
    $(mainTable).css('border-bottom', '0');
    $(tfootCopy).css('border-top', '0');
  }
  // Adjust the width of thead cells when window resizes
  $(window).resize(function() {
    adjustTableHeaderWidth();
    adjustTableFooterWidth();
  }).resize(); // Trigger resize handler
}); //]]>

现在的问题是，我想迁移上面的代码，以便在Marionette Backbone视图中使用它，但不能这样做，因为我需要获得宽度，以便在创建的新表中对齐列，但当我尝试这样做时，render（onRender）函数中的值为零（0）。

所以，我的问题是：有没有任何方法可以让我使用Backbone获得计算出的CSS值，类似于我上面所做的

主干视图只是jQuery元素的包装器。您可以使用$el属性来修改宽度，该属性保存对与视图关联的jQuery元素的缓存引用。下面是一个在调整大小时更改宽度的示例。

var TableView = Backbone.View.extend({
    el: "#my-table",
    render: function() {
        this.$el.css("width", "80%");
        return this;
    },
    resize: function() {
        //perform the resize here.
    }
});
var table = new TableView().render();
$(window).resize(function() {
    table.resize();
}

重要信息：代码假设DOM中已经存在#my-table元素。如果使用Backbone创建新元素，请确保在更改表的大小之前在DOM上呈现该表。

通过在$el中添加脚本标记来解决问题，强制它在视图显示后执行，因此CSS已经计算好了：

onShow : function () {
    this.$el.append('<script>require(["table_fixedheader"], function () {jq.detachTableHeaderAndFooter();});');
}

注意脚本标记尚未关闭。这是故意的，因为框架将负责关闭它。否则，它就不会像预期的那样工作。

相关文章：