Question

我有一个项目列表，每个项目都有一个类型。我需要显示所有项目，但每种类型都有自己的＆＃34;配置＆＃34; （装订，课程等）。我的代码看起来像这样：

        <!-- ko foreach: items -->
                <!-- ko if: itemType == 'type1' -->
                    <div data-bind="value: $parent[itemName]"></div>
                <!-- /ko -->
                <!-- ko if: itemType == 'type2' -->
                    <div data-bind="value: $parent[itemName], bindingFunc1: foo"></div>
                <!-- /ko -->
                <!-- ko if: itemType == 'type3' -->
                    <div data-bind="value: $parent[itemName], bindingFunc2: bar"></div>
                <!-- /ko -->
                <!-- ko if: itemType == 'type4' -->
                    <div data-bind="value: $parent[itemName], bindingFunc1: foo, bindingFunc2: bar"></div>
                <!-- /ko -->
        <!-- /ko -->

您可以看到所有项目都有value: $parent[itemName]，我只是复制了它。

在我的原始代码中 - 重复的代码要长得多，每次我想要更改的东西我需要在所有类型中更改它。

有没有办法将所有行合并到一行并插入＆＃34; if (type == ...)＆＃34;在div里面根据类型添加更多绑定？

Answer 1

您可以创建一个custom binding来动态确定有效的元素绑定并将它们应用于您的元素：

ko.bindingHandlers.myItem = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        var value = valueAccessor(),
            // common bindings here
            effectiveBindings = {
                value: bindingContext.$parent.itemName
            };

        // additional bindings determined by itemType
        switch (value.itemType) {
            case 'type1':
                // nothing
                break;
            case 'type2':
                effectiveBindings.bindingFunc1 = "foo";
                break;
            case 'type3':
                effectiveBindings.bindingFunc2 = "bar";
                break;
            case 'type4':
                effectiveBindings.bindingFunc1 = "foo";
                effectiveBindings.bindingFunc2 = "bar";
                break;
        }

        ko.applyBindingsToNode(element, effectiveBindings);
    }
};

现在你可以将你的观点归结为

<!-- ko foreach: items -->
<div data-bind="myItem: $data"></div>
<!-- /ko -->

淘汰'如果'在一个元素内

1 个答案: