Question

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

我的绑定处理程序限制带有一些行的文本并用ellipsis替换剩余的文本，当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时以及通过手动绑定回调使用它时，我也遇到了这个问题

Answer 1

使用延迟绑定处理程序。来自Durandal docs，

有时，绑定处理程序只有在将元素附加到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)*$/, '...');
        }
    }
});

使用Durandal组合处理不正确的绑定

1 个答案: