(Илья Кантор) Селект

Селект с помощью Knockout

by ZondArt

HTML

<div class="select" >
    <div class="selected" data-bind="text: currentSelect(), click: toggle">Выберите</div>
    <ul data-bind="foreach: selects, css: {open: isOpen}, click: onUlClick" >
        <li data-bind="text: text, attr: {value: value}"></li>
    </ul>
</div>

CSS

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
}
ul li {
    cursor: pointer;
    margin: 0;
    padding: 0;
    border: 1px solid #AC3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

ul li:hover{
    background-color: #ccc;
}

.selected{
    border: 1px solid #4ca;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;  
    cursor: pointer;
}

.select {
    display: block;
    width: 150px; 
}

.open {
    display: block;
}

JavaScript

Select = function(options){
    var self = this;
    this.value = ko.observable(options.value);
    this.isOpen = ko.observable("");
    this.selects = ko.observableArray([
        {value: "tea", text: "Чай"},
        {value: "coffe", text: "Кофе"},
        {value: "milk", text: "Молоко"},
        {value: "water", text: "Вода"}
    ]);    
    this.currentSelect = function(){
        return this.value();
    };
    
    this.onUlClick = function(model, e){
        this.value(ko.dataFor(e.target).text);
        console.log(ko.dataFor(e.target));
        console.log(e.target);
        this.isOpen( !this.isOpen() );        
    };

    this.toggle = function(){
        console.log("click");
        this.isOpen( !this.isOpen() );
    }
};





ko.applyBindings(new Select({value: "Выберите!"}));