2个模板中的基因剔除observablearray [英] knockout observablearray in 2 templates

问题描述

我有2个observabeleArrays.一种包含我可以选择的所有可能类型，另一种包含所有选择的类型.第一个模板显示所有可能的类型，其他所有选择的类型.如果我单击第一个模板(所有可能性)之一，它将被添加到所选模板的列表中，并显示在第二个模板中.如果我在第二个模板中单击一个选定的模板，则会从那里将其删除.另外，在第一个模板中，我要显示对所选对象的检查.大多数东西都可以用，但是如果我通过第二个模板删除一个对象，则检查不会更新.我试图将代码简化为重要部分，希望这样更有意义，并且没有任何错误: 有人知道如何解决它，所以我的检查可以正确显示吗?它取决于每个对象的Selected值，该值可以正确更新，但视图不会改变.

I have 2 observabeleArrays. One contains all the possible types which I can select and the other one contains all the selected ones. The first template shows all the possible types and the other all the selected ones. If I click on one of first template(all possibilities), it gets added to the list of selected ones and is displayed in the second template. If I click on a selected one in the second template it is removed from there. Also, in the first template I want to display a check on the objects that are selected. Most of the stuff works, except the check does not get updated if I remove an object via the second template. I've tried to reduce my code to the important parts, I hope it makes more sense like this and doesn't have any mistakes: Anyone an idea how to fix it, so my check shows correctly? It's depending on the Selected value of each object, which updates correctly, but the view doesn't change.

//main html
//...
            <div data-bind="component: {
                    name: 'selector-component',
                    params: {
                        selected: vm.selected,
                        types: vm.types,
                    }
                }">
            </div>
            <div data-bind="component: {
                    name: 'selected-component',
                    params: {
                        selected: vm.selected,
                    }
                }">
            </div>
//...
<script type="text/javascript">

    vm.selected = ko.observableArray([]);
    vm.types = ko.observableArray([]);

        ko.components.register('model-selected-component', {
            template: { element: document.getElementById('selector-component-template') },
            viewModel: SelectorComponentModel
        });
</script>
<script type="text/javascript">

    vm.selected = ko.observableArray([]);

        ko.components.register('model-selected-component', {
            template: { element: document.getElementById('selected-component-template') },
            viewModel: SelectorComponentModel
        });
</script>           

//template1
<template id="selector-component-template">
                    <div class="panelContainer">
                        <!-- ko foreach: types -->
                                <a data-bind="attr: {title: Name}, click: $parents.select" class="thumbnail text-center" href="#">
                                    <span style="display:block;height:10px;width:10px;">
                                        <i data-bind="visible: Selected" class="fa fa-check" style="color:green"></i>
                                     <img src="@Url.Content("~/Content/Images/type.png")" />
                                   </span>
                                </a>
                        <!-- /ko -->
                    </div>
</template>


//template2
<template id="selected-component-template">
    <div class="panel panel-default">
        <div class="panel-heading">Selected Properties</div>
        <div class="panel-body">
            <div class="panel-body panel-body-nobottompadding">
                <div class="panelContainer">
                    <!-- ko foreach: selected -->
                        <a class="thumbnail text-center" data-bind="attr: {title: Name}, click: $parent.select">
                            <img src="@Url.Content("~/Content/Images/type.png")" />
                        </a>
                    <!-- /ko -->
            </div>
        </div>
    </div>
</template>

//selector.js
function SelectorComponentModel(params) {

    var self = this;
    self.selected = params.selected || ko.observableArray([]);
    self.types = params.types || ko.observableArray([]);

    self.select = function (types) {
        if (self.selected.indexOf(types) == -1)
            self.selected.push(types);
        else
            self.selected.remove(types);

        types.Selected = types.Selected == true ? false : true;
        //refresh
        var data = self.types();
        self.types([]);
        self.types(data);
    }

推荐答案

您不应尝试维护两个单独的数组.只需为所有项目创建一个数组，仅为选定项目创建computed数组.

You should not try to maintain two separate arrays. Just make one array for all items and computed array for selected items only.

self.items = ko.observableArray();

self.items.selected = ko.computed(() => {
    return self.items().filter(item => item.selected());
});

看看这个示例.

更新

您可能会看到，我大量使用了箭头功能.但是，它们是大多数现代浏览器支持的ES6标准的一部分，您的体验可能有所不同.对于这类不幸的用户，有更多经典示例.

As you may see I use arrow functions alot. However they are part of ES6 standard supported by most modern browsers your experience may differ. For such unlucky users there is more classic example.

更新2

当然，您的Selected属性必须是可观察的.您可以在分配给模型之前为每个项目转换此属性.

Of course your Selected property must be observable. You can convert this property for each item before assigning to the model.

更新示例

这篇关于2个模板中的基因剔除observablearray的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！