Knockoutjs.com - Contacts Editor

http://knockoutjs.com/examples/contactsEditor.html

by corinnekm

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div data-bind="foreach: widgets" class="widget" id="ls_box_widget_browse_solutions" style="margin-right: 20px;">
					<h2 class="header-two-columns translatable"><input data-bind='value: caption' /></h2>
					<div class="content-two-columns">
						
							<span class="visual visual-landingpage visual-widget" id="visual-browse" title="Solutions"></span>
							
						<p class="widget-text"><input data-bind='value: description' /></p>
					</div>
					<div class="content-two-columns widget-links-area">
						<div class="content-single-column padded widget-links-container"> 
							<ul class="content-list">
								
									<li>
										
											
											
												<a href="/eTass/tass/browseFusion.do?create=kb:TASS_KN_METADATA_en-GB&amp;askingService=browseKnowledge" class="translatable">Browse solutions</a>
											
										
									</li>
													
													
								
							</ul>
						</div>
					</div>
				</div>

<!--
<div class='liveExample'> 
    
    <h2>Contacts</h2>
    <div id='contactsList'>
        <table class='contactsEditor'>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Phone numbers</th>
            </tr>
            <tbody data-bind="foreach: contacts">
                <tr>
                    <td>
                        <input data-bind='value: firstName' />
                        <div><a href='#' data-bind='click: $root.removeContact'>Delete</a></div>
                    </td>
                    <td><input data-bind='value: lastName' /></td>
                    <td>
                        <table>
                            <tbody data-bind="foreach: phones">
                                <tr>
                                    <td><input data-bind='value: type' /></td>
                                    <td><input data-bind='value: number' /></td>
         ...

CSS

body { font-family: arial; font-size: 14px; }

.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }

.liveExample TR { vertical-align: top; }
.liveExample TABLE, .liveExample TD, .liveExample TH { padding: 0.2em; border-width: 0; margin: 0; }
.liveExample TD A { font-size: 0.8em; text-decoration: none; }
.liveExample table.contactsEditor > tbody > TR { border-bottom: 1px solid silver; }
.liveExample td input { width: 8em; }

li { list-style-type: disc; margin-left: 20px; }

JavaScript

var widgetsData = [
    { caption: "Solutions", description: "Solutions desc", links: [
        { url: "show link1"},
        { url: "show link2"}]
    },
    { caption: "Support", description: "Support Desc", links: [
        { url: "show link1"},
        { url: "show link2"}]
    }
];
/*
var initialData = [
    { firstName: "Danny", lastName: "LaRusso", phones: [
        { type: "Mobile", number: "(555) 121-2121" },
        { type: "Home", number: "(555) 123-4567"}]
    },
    { firstName: "Sensei", lastName: "Miyagi", phones: [
        { type: "Mobile", number: "(555) 444-2222" },
        { type: "Home", number: "(555) 999-1212"}]
    }
];*/
 
var WidgetsModel = function(widgets) {
    var self = this;
    self.contacts = ko.observableArray(ko.utils.arrayMap(widgets, function(widget) {
        return { caption: widget.caption, description: widget.description, links: ko.observableArray(widgets.links) };
    }));
 
    /*self.addContact = function() {
        self.contacts.push({
            firstName: "",
            lastName: "",
            phones: ko.observableArray()
        });
    };
 
    self.removeContact = function(contact) {
        self.contacts.remove(contact);
    };
 
    self.addPhone = function(contact) {
        contact.phones.push({
            type: "",
            number: ""
        });
    };
 
    self.removePhone = function(phone) {
        $.each(self.contacts(), function() { this.phones.remove(phone) })
    };
 
    self.save = function() {
        self.lastSavedJson(JSON.stringify(ko.toJS(self.contacts), null, 2));
    };
 
    self.lastSavedJson = ko.observable("")*/
};
 
ko.applyBindings(new WidgetsModel(widgetsData));