appointments

by knunery

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<div id="betterlist_app" class='liveExample'>
        New item:
        <input id="new-item" data-bind='value: itemToAdd, valueUpdate: "afterkeydown"' /> 
        <button data-bind='enable: itemToAdd().length > 0' id='add-item' type='submit'>Add</button> 
        
        <p>Your items:</p>
        <div>
            <select id='betterlist' multiple='multiple' width='50'></select>
        </div>
    
        <div> 
        <button id='remove-item'>Remove</button>
        <button id='sort-item'>Sort</button>
    </div> 
</div>

<script id="tmpl-Appointment" type="text/template">
    <td><div></div></td>
</script>

<script id="tmpl-Appointments" type="text/template">
<table>
    <tr></tr>
</table>
</script>

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; }

JavaScript

//Better List - Backbone
var Appointment = Backbone.Model.extend({});

var AppointmentsCollection = Backbone.Collection.extend({
    model: Appointment
});

var DailySchedulesCollection = Backbone.Collection.extend({
    model: AppointmentsCollection 
});

var AppointmentView = Backbone.View.extend({
    template: _.template($("tmpl-Appointment").html())
});

var AppointmentListView = Backbone.View.extend({
    render: function(){
            this.collection.forEach(this.addOne, this);
    },
    addOne: function(model){
        var appointmentView = new AppointmentView({model: model});
        appointmentView.render();
        this.$el.append(appointmentView.el);
    }
});

/*
var ListView = Backbone.View.extend({
    initialize: function() {
        this.collection.on('add', this.addOne, this);
    },
    el: $('#betterlist_app'),
    events: {
        "click #add-item": "addItem",
        "click #sort-item": "sortItem",
        "click #remove-item": "removeItem"
    },
    render: function() {
        this.collection.forEach(this.addOne, this);
    },
    addOne: function(model) {
        var itemView = new ItemView({
            model: model
        });
        itemView.render();
        this.$el.find('#betterlist').append(itemView.el);
    },
    addItem: function() {
        console.log('addItem');
        var newItem = $("#new-item");
        var itemValue = newItem.val();

        if ( !! itemValue) {
            newItem.val('');
            this.collection.add(new ItemModel({
                value: itemValue
            }));
        }
    },
    sortItem: function() {
        this.$el.find('#betterlist').html('');
        this.render();
    },
    removeItem: function() {
        console.log('removeItem');
        $('#betterlist option:selected').each(function() {
            $(this).trigger('customRemove');
            console.log($(this).text());
        });
    }
});

var itemCollection = new ItemCollection();

// The collection will always be sorted...