Knockoutjs if/shim绑定

Question

我希望创建一个行为类似于if绑定的自定义绑定，但是它不是完全删除元素，而是在应该删除的时候用另一个高度相同的元素替换它。

我很难找到一种不烦人的方法。我对淘汰赛的内部因素还不太了解，无法以一种有教养的方式去做这件事。

任何指点都很感激。

谢谢!

Answer 1

您可以编写自己的绑定：

ko.bindingHandlers.shim = {
    update: function(element, valueAccessor, allBindings) {

        // First get the latest data that we're bound to
        var value = valueAccessor();

        // Next, whether or not the supplied model property is observable, get its current value
        var shim = ko.unwrap(value);

        if (shim) {
            var shimEl = $(element).data('shim');
            // Create the shim element if not created yet
            if (!shimEl) {
                shimEl = $('<div />').addClass('shim').appendTo(element);
                // Equal the height of the elements
                shimEl.height($(element).height());
                $(element).data('shim', shimEl);
            }
            shimEl.show();
        } else {
            var shimEl = $(element).data('shim');
            if (shimEl) {
                shimEl.hide();
            }
        }

        // You can also trigger the if-binding at this point
        // ko.bindingHandlers.if.update(element, valueAccessor, allBindings);
    }
};

然后像这样使用它：

<div data-bind="shim: [condition]"></div>