0

Durandal 在附加视图模型之前将其绑定到视图，当您尝试使用 jquery 检查元素大小时，它总是返回 0。这是因为 jQuery 无法获得不可见或不可见容器中元素的正确大小。

我的绑定处理程序，它用一些行数限制文本并用省略号替换剩余文本，当 durandal 绑定页面时不起作用，但在第二次更新后，当元素可见时工作

ko.bindingHandlers.ellipsis = {
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        ko.bindingHandlers.text.update(element, valueAccessor);
        var lines = allBindings.get('lines');

        var $element = $(element);
        var lineHeight = 1.3;
        var heigth = lines * (+$element.css('font-size').substr(0, 2)) * lineHeight;

        while ($element.outerHeight() > heigth) {
            $element.text(replaceLast);
        }

        function replaceLast(index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        }
    }
};

当我通过绑定处理程序使用jQuery.customSelect以及通过手动绑定回调使用它时，我也遇到了这个问题

4

1 回答 1

2

使用延迟绑定处理程序。从Durandal 文档中，

有时，您的绑定处理程序仅在元素附加到 DOM 并且视图的整个组合完成后才需要使用它。这方面的一个例子是任何需要测量 HTML 元素大小的代码。Durandal 提供了一种注册淘汰绑定处理程序的方法，以便在组合完成之前它不会执行。为此，请使用 composition.addBindingHandler。一种常见的用途是聚焦元素。如果您有一个现有的已注册绑定处理程序，则只需执行以下操作即可更改其执行时间：

因此，您的投标处理程序将变为以下内容：

composition.addBindingHandler('ellipsis', {
    update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        ko.bindingHandlers.text.update(element, valueAccessor);
        var lines = allBindings.get('lines');

        var $element = $(element);
        var lineHeight = 1.3;
        var heigth = lines * (+$element.css('font-size').substr(0, 2)) * lineHeight;

        while ($element.outerHeight() > heigth) {
            $element.text(replaceLast);
        }

        function replaceLast(index, text) {
            return text.replace(/\W*\s(\S)*$/, '...');
        }
    }
});
于 2014-02-11T19:52:54.660 回答