计算剔除渲染组件的宽度答案

【问题标题】：Calculating width of knockout rendered components计算剔除渲染组件的宽度
【发布时间】：2017-01-17 19:16:47
【问题描述】：

我正在使用敲除来呈现用作单选按钮的可点击元素列表。但是，由于这是一个元素水平列出的列表，因此当放入太多元素时（有时可能会出现这种情况），它可能会从页面右侧滑出。现在，我只是让它打破并制作多行，但这对于我想要的设计来说并不理想。

问题是我插入的组件具有可变宽度，具体取决于每个组件中列出的人的姓名。我想要做的是能够告诉我可以为给定的浏览器宽度放置多少个组件，然后将其余的隐藏在一个不同的可观察数组中，我可以以不同的方式呈现（使用下拉菜单）。我不相信有任何简单的方法可以使用 CSS 来做到这一点，因为它必须在完全不同的元素中呈现。

我的 ViewModel 中的代码如下所示：

self.personList = ko.observableArray(params.personList);

self.visiblePersons = ko.pureComputed(function () {
    var viewPortWidth = $("#personListContainer").width();
    var personArray = [];
    $.each(personList(), function(person) {
        var widthOfPersonElement = getPersonWidth(person); //not sure how to get the person width after render?
        viewPortWidth -= widthOfPersonElement;
        if (viewPortWidth >= 0) {
            personArray.push(person);
        }
    });
    return personArray;
});

self.overflowPersons = ko.pureComputed(function () {
    //get all persons in the person list that AREN'T in the visible list
    //this is the easy part
});

我想我的问题是，这真的可能吗？我想避免渲染它，然后获取每个元素的宽度，然后再次重新渲染或类似的混乱/闪烁。我知道，为了让它在调整窗口大小时动态更新，我必须为元素添加一个触发器，但我什至不知道我该怎么做这第一步。

编辑：所以，我四处摸索了一下，最终决定我必须使用 dom。我的解决方案如下所示：

var getRenderedPersonWidth = function(person) {
    var displayString = person.FullName + person.ID;
    var element = document.createElement('span');
    $(element).text(displayString);
    $(element).addClass(""); //class names of the element I'm rendering
    $('#elementtorenderunder').append(element);
    var width = $(element).width();
    $(element).remove();
    return width;
}

它实际上工作得很好，虽然你必须保持类与你正在渲染的 html 同步更新。不漂亮，但它是我目前最好的。

【问题讨论】：

标签： javascript jquery html css knockout.js

【解决方案1】：

您将无法通过使用您的模型来做到这一点，因为您的问题是 DOM 相关的，并且 viewmodel 不知道它与 DOM 的关系。您可以在多个位置呈现相同的数据。

当您想要控制数据的呈现方式时，您需要custom binding handler。这实际上是可能的，但这是一个复杂的问题。

【讨论】：

谢谢，我实际上最终暂时使用了 dom 来解决这个问题。我明白你关于它与 dom-agnostic 的观点。

【解决方案2】：

编辑：所以，我四处摸索了一下，最终决定我必须使用 dom。我的解决方案如下所示：

var getRenderedPersonWidth = function(person) {
    var displayString = person.FullName + person.ID;
    var element = document.createElement('span');
    $(element).text(displayString);
    $(element).addClass(""); //class names of the element I'm rendering
    $('#elementtorenderunder').append(element);
    var width = $(element).width();
    $(element).remove();
    return width;
}

它实际上工作得很好，尽管你必须保持类与你正在渲染的 html 同步更新。不漂亮，但它是我目前最好的。

【讨论】：