Filters Block

by amitava82

HTML

<script src="https://github.com/SteveSanderson/knockout/raw/master/build/output/knockout-latest.debug.js"></script>
<script src="https://github.com/SteveSanderson/knockout.mapping/raw/master/build/output/knockout.mapping-latest.debug.js"></script>
<div itemref="filters_panel" data-bind="foreach: allFilters">
    <div itemref='filters_block' data-bind="attr: {'name':name}, 
                                            event: {
                                                mouseover: enableAddFiltersButton, 
                                                mouseout: disableAddFiltersButton
                                            }">
        <h1 itemref="filters_block_head">
            <span data-bind="text: alias"></span>
            <a href="#" data-bind="click: removeFiltersBlock">x</a>
        </h1>
        <p itemref="filters_block_default" data-bind="text: 'default values', 
                                                      visible: $data.values().length == 0">
        </p>
        <div itemref='filters_list' data-bind="foreach: values">
            <p itemref="filter" class="child_1_content child_1_box">
                <span data-bind="text: name"></span>
                <a href="#" data-bind="text:'x - this is not working :(', 
                                      click: $parent.removeFilter"></a>
            </p>
        </div>
        <button itemref="addFiltersButton" data-bind="text: 'Add new values - this is not working too :(',
                                                visible: addFiltersButtonVis,
                                                click: addFilters">
        </button>
        <hr>
    </div>
</div>

CSS

p{
    padding-left: 1em
}

JavaScript

function FilterBlock(obj){
        var self = this;
    
        ko.mapping.fromJS(obj, {}, self);
        self.removeFiltersBlock = function(){
          viewModel.allFilters.remove(self); 
        };
        self.removeFilter = function(item){
            // This is working :)
            self.values.remove(item);
        };
        self.addFiltersButtonVis=ko.observable(false);
        self.enableAddFiltersButton=function(){
            self.addFiltersButtonVis(true);
        };
        self.disableAddFiltersButton=function(){
            self.addFiltersButtonVis(false);
        };
        self.addFilters = function(){
            // Working too :)
            self.values.push(
                {id:100, name:"new", selected:0}
            );
        }
    }
var allFiltersMapping = {
    create: function(opts){
        return new FilterBlock(opts.data);
    },
    'values': {    
        key:function(data) {
            return ko.utils.unwrapObservable(data.id);
        }
    }
}
var viewModel = {
    allFilters: ko.mapping.fromJS([], allFiltersMapping)
}
var servData=[
    {id:0, name:"filtersGroup_1", alias:"Filters Group 1",
        values:[
            {id:0, name:"filter 1", selected:0 },
            {id:1, name:"filter 2", selected:0 },
        ]},
    {id:1, name:"filtersGroup_2", alias:"Filters Group 2",
        values:[
            {id:0, name:"filter 1", selected:0 },
            {id:1, name:"filter 2", selected:1 },
            {id:2, name:"filter 3", selected:1 }
        ]},
    {id:2, name:"filtersGroup_3", alias:"Filters Group 3",
        values:[]}
];
ko.mapping.fromJS(servData, {}, viewModel.allFilters);
ko.applyBindings(viewModel);