Durandal 作曲的错误绑定处理答案

【问题标题】：Incorrect binding handling with Durandal composingDurandal 作曲的错误绑定处理
【发布时间】：2014-03-09 19:12:03
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery knockout.js durandal durandal-navigation

【解决方案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)*$/, '...');
        }
    }
});

【讨论】：