Skip to content

Commit

Permalink
20 - Create a template for new events and display it
Browse files Browse the repository at this point in the history
  • Loading branch information
lsolc committed Feb 17, 2012
1 parent d819762 commit a7fb9a4
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 51 deletions.
70 changes: 38 additions & 32 deletions public/new.html
Expand Up @@ -9,41 +9,47 @@

<body id="new">
<button id="create_event_button" type="button" onclick="">Create Event</button>
<section class="container">
<form id="new_event" action="new_submit" method="get" accept-charset="utf-8">
<h3>New Event</h3>
<input type="text" size="58" name="" value="" id="title" placeholder="Title:">
<textarea name="Name" rows="8" cols="40" id="description" placeholder="Description:"></textarea>

<fieldset id="from" class="">
<legend>Start</legend>
<input value="2012-2-31" type="date">
<input value="08:45" type="time">
</fieldset>

<fieldset id="till" class="">
<legend>End</legend>
<input value="" placeholder="" type="date">
<input value="" placeholder="" type="time">
</fieldset>

<div class="wrapper">
<select data-placeholder="Choose a member..." multiple="multiple" style="width: 412px;">
<option value="member1">Member1</option>
<option value="member2">Member2</option>
</select>
</div>

<section class="controls">
<input type="submit" value="Create" class="create_button">
<input type="button" value="Cancel" class="save_button">
</section>
</form>
</section>
<section class="current"></section>
</body>




<!--
<body id="new">
<button id="create_event_button" type="button" onclick="">Create Event</button>
<section class="container">
<form id="new_event" action="new_submit" method="get" accept-charset="utf-8">
<h3>New Event</h3>
<input type="text" size="58" name="" value="" id="title" placeholder="Title:">
<textarea name="Name" rows="8" cols="40" id="description" placeholder="Description:"></textarea>
<fieldset id="from" class="">
<legend>Start</legend>
<input value="2012-2-31" type="date">
<input value="08:45" type="time">
</fieldset>
<fieldset id="till" class="">
<legend>End</legend>
<input value="" placeholder="" type="date">
<input value="" placeholder="" type="time">
</fieldset>
<div class="wrapper">
<select data-placeholder="Choose a member..." multiple="multiple" style="width: 412px;">
<option value="member1">Member1</option>
<option value="member2">Member2</option>
</select>
</div>
<section class="controls">
<input type="submit" value="Create" class="create_button">
<input type="button" value="Cancel" class="save_button">
</section>
</form>
</section>
</body>-->




Expand Down
44 changes: 37 additions & 7 deletions public/scripts/new_event.coffee
@@ -1,17 +1,47 @@
define [], () ->
define [
'text!templates/events/new_event.tmpl'
], (new_event_text) ->
NewEvent = Backbone.Model.extend
title : 'title'
description: ''
initialize: () -> {}
initialize: () ->


NewEventView = Backbone.View.extend
el: '#new .current',
initialize: () ->
this.template = Handlebars.compile(new_event_text)

render: () ->
html_string = this.template({display_name: new_event.get('display_name')})
$(this.el).html(html_string)
$("select").chosen()
#$("select").chosen().change(() -> alert('fired by chosen'))



new_event = new NewEvent({display_name: "Nuria"})

new_event_view = new NewEventView()
new_event_view.render()




new_event = new NewEvent({title: "Zajit do servisu", description: "Some text........" })
$("select").chosen()
$("select").chosen().change(() -> alert('fired by chosen'))




###
members = $.getJSON "/members", (result) ->
options = $("#options")
$.each result, () ->
options.append($("<option />")).val(this.id).text(this.display_name)###










Expand Down
35 changes: 24 additions & 11 deletions public/scripts/new_event.js
@@ -1,22 +1,35 @@
(function() {

define([], function() {
var NewEvent, new_event;
define(['text!templates/events/new_event.tmpl'], function(new_event_text) {
var NewEvent, NewEventView, new_event, new_event_view;
NewEvent = Backbone.Model.extend({
title: 'title',
description: '',
initialize: function() {}
});
NewEventView = Backbone.View.extend({
el: '#new .current',
initialize: function() {
return {};
return this.template = Handlebars.compile(new_event_text);
},
render: function() {
var html_string;
html_string = this.template({
display_name: new_event.get('display_name')
});
$(this.el).html(html_string);
return $("select").chosen();
}
});
new_event = new NewEvent({
title: "Zajit do servisu",
description: "Some text........"
});
$("select").chosen();
return $("select").chosen().change(function() {
return alert('fired by chosen');
display_name: "Nuria"
});
new_event_view = new NewEventView();
return new_event_view.render();
/*
members = $.getJSON "/members", (result) ->
options = $("#options")
$.each result, () ->
options.append($("<option />")).val(this.id).text(this.display_name)
*/
});

}).call(this);
32 changes: 31 additions & 1 deletion public/scripts/templates/events/new_event.tmpl
@@ -1 +1,31 @@

<section class="container">
<form id="new_event" action="new_submit" method="get" accept-charset="utf-8">
<h3>New Event</h3>
<input type="text" size="58" name="" value="" id="title" placeholder="Title:">
<textarea name="Name" rows="8" cols="40" id="description" placeholder="Description:"></textarea>

<fieldset id="from" class="">
<legend>Start</legend>
<input value="2012-2-31" type="date">
<input value="08:45" type="time">
</fieldset>

<fieldset id="till" class="">
<legend>End</legend>
<input value="" placeholder="" type="date">
<input value="" placeholder="" type="time">
</fieldset>

<div class="wrapper">
<select id="options" data-placeholder="Choose a member..." multiple="multiple" style="width: 412px;">
<option value="id">{{display_name}}</option>

</select>
</div>

<section class="controls">
<input type="submit" value="Create" class="create_button">
<input type="button" value="Cancel" class="save_button">
</section>
</form>
</section>

0 comments on commit a7fb9a4

Please sign in to comment.