Knockoutjs if / shim绑定

时间:2013-11-26 07:35:47

标签: javascript knockout.js

我想创建一个行为类似于if绑定的自定义绑定,但不是完全删除该元素,而是在应该删除它时将其替换为具有相同高度的另一个元素。

我正在努力寻找一种不这样做的方法。我不太了解淘汰的内部,以一种受过教育的方式解决这个问题。

任何指针都非常感激。

谢谢!

1 个答案:

答案 0 :(得分: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>