Knockout UI

by Trae

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0rc.debug.js"></script>
<ul data-bind="foreach: dependencies">
    <li data-bind="click: $parent.setActiveDependency">
        <input type=text data-bind="value: name, event: { onblur: $parent.clearActiveDependency}" />
        <select id=dependencyType data-bind="options: types, optionsValue:'id', optionsText:'name', value: dependencyTypeId, style: { display: $parent.activeDependency() && $parent.activeDependency().dependencyTypeId === dependencyTypeId    ? '' : 'none' }">
    </select>
    </li>
</ul>

<div class="dependencyContainer" data-bind="with: activeDependency, style: { display: activeDependency() ? '' : 'none' }">
    <input id=dependencyName type=text data-bind="value: name">
    <select id=dependencyType data-bind="options: types, optionsValue:'id', optionsText:'name', value: dependencyTypeId">
    </select>
</div>
<span data-bind="text: activeDependency() ? activeDependency().name : 'unknown'"></span>
<span data-bind="text: activeDependency() ? activeDependency().dependencyTypeId: 'unknown'"></span>

CSS

.dependencyContainer
{
    border: 1px solid black;
    background-color:#00FF00'
}

input[type="text"]
{
    margin: 2px;
    border: 0px solid;
}

input[type="text"]:hover
{
    margin: 1px;
    border: 1px solid;
    border-color:
        silver
        #D9D9D9 
        #D9D9D9 
        #D9D9D9;
}

input[type="text"]:focus
{
    margin: 1px;
    border: 1px solid blue;
}

JavaScript

function Dependency(data, depTypeEnum) {
    var that = this;
    this.dependencyTypeId = ko.observable(data.dependencyType);
    this.dependencyType = ko.computed(function(){ return depTypeEnum.get(data.dependencyType);});
    this.name = ko.observable(data.name);
    this.fullName = ko.computed(function(){
        return that.dependencyType().name + ': ' + that.name();
    });
}

function DependencyViewModel() {
    var self = this;
    self.dependencies = ko.observableArray([]);
    self.newDependency = ko.observable();
    self.activeDependency = ko.observable();

    self.DependencyType = {
        Unknown: {
            name: "Unknown",
            id: 0
        },
        Library: {
            name: "Library",
            id: 1
        },
        Website: {
            name: "Website",
            id: 2
        },
        toArray: function() {
            types = [];
            for (var t in self.DependencyType) {
                if (self.DependencyType.hasOwnProperty(t) && self.DependencyType[t].name){
                        types.push(self.DependencyType[t]);
                }
            }
            return types;
        },
        get: function(value) {
            for (var t in self.DependencyType) {
                var depType = self.DependencyType[t];
                if (depType.name === value || depType.id === parseInt(value, 10)) {
                    return depType;
                }
            }

            return self.DependencyType.Unknown;
        }
    };
    
    self.types = self.DependencyType.toArray();
    
    
    self.setActiveDependency = function(){          
        self.activeDependency(this);        
    };
    
    self.clearActiveDependency = function(){          
        //self.activeDependency = ko.observable();
        alert('blur');
    };

    //Load Initial Data
    (function($) {
        var data = [{
            dependencyType: 1,
            name: 'Loves.Web'},
        {
            dependencyType: 1,
         ...