epoch · March 5, 2014 22:21
diff --git a/demo2.js b/demo2.js
 <!doctype html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>demo2</title>
  <link rel="stylesheet" href="stylesheets/main.css">
  <style>
    html, body { height: 100%; margin: 0;}
    #container { display: flex; height: 100%; flex-flow: row;}    
    #index { flex: 1; background: white; }
    #quote-list { margin: 5px; }
    #quote-list > div { background: lightgray; padding: 5px; margin-bottom: 5px; }
    #show { flex: 2; background: pink; font-size: 4em; height: 100%;}
    #quote-wrapper { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 2.5em; text-align: center;}
    #quote-wrapper .author { font-size: .5em;}
    input { width: 100%; margin: 0; border: none; font-size: 2em; outline: none; padding: 4px;}
    #quote-input { background: lightblue; }
    #author-input { background: lightgreen;}
  </style>
 </head>
 <body>
  
  <div id="container">
    
    <div id="index">
      <div id="new-quote-form">
        <input id="quote-input" type="text" placeholder="enter quote..." autofocus>
        <input id="author-input" type="text" placeholder="who saids...">
      </div>

      <div id="quote-list"></div>
    </div>

    <div id="show">
      <div id="quote-wrapper">
        <div id="box">
          <div class="quote">WDI Quotes</div> 
          <div class="author">DT</div>
        </div>
      </div>
    </div>

  </div>

  <script type="text/javascript" src="javascripts/jquery-1.11.0.js"></script> 
  <script type="text/javascript" src="javascripts/underscore.js"></script> 
  <script type="text/javascript" src="javascripts/backbone.js"></script> 
  <script>
    var App = {}

    App.Quote = Backbone.Model.extend({
    });

    App.Quotes = Backbone.Collection.extend({
      model: App.Quote
    });

    App.AppView = Backbone.View.extend({      
      events: {
        'keyup input': 'addQuote'
      },
      initialize: function() {
        this.quoteList = $('#quote-list');
      },

      addQuote: function(event) {
        if (event.which === 13) {
          var quoteBody = $('#quote-input').val();
          var slug = quoteBody.toLowerCase().replace(' ', '-');
          var quote = new App.Quote({body: quoteBody, slug: slug })
          App.quotes.add(quote);
          var view = new App.QuoteListItemView({ model: quote });
          this.quoteList.append(view.render().el);
          $('input').val('').first().focus();
        }
      }
    })


    App.QuoteListItemView = Backbone.View.extend({
      template: _.template('<div class="quote"><a href="#<%= slug %>"><%= body %></a> <span></div>'),
      // events: {
      //   'click a': 'showQuote'
      // },
      render: function() {
        
        var html = this.template(this.model.toJSON());
        this.$el.html(html);
        return this;
      },
      showQuote: function(e) {
        e.preventDefault();
        $('#quote-wrapper .quote').html(this.model.get('body'));
        $('#quote-wrapper .author').html('somebody');
      }
    });

    App.Router = Backbone.Router.extend({
      routes: {
        '': 'home',
        ':quote': 'showQuote'
      },

      initialize: function() {
        App.appView = new App.AppView({ el: $('#container') });
        App.appView.render();
    
      },

      home: function() {
      },

      showQuote: function(paramSlug) {
        var quoteModel = App.quotes.findWhere({slug: paramSlug});

        if (quoteModel === undefined)
          return;

        $('#quote-wrapper .quote').hide().html(quoteModel.get('body')).fadeIn();
        $('#quote-wrapper .author').hide().html('somebody').fadeIn();
      }
    });

    $(document).ready(function() {  

      App.quotes = new App.Quotes();    
      App.router = new App.Router();
      Backbone.history.start();    
    })

  </script>
 </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>demo2</title>
	<link rel="stylesheet" href="stylesheets/main.css">
	<style>
	html, body { height: 100%; margin: 0;}
	#container { display: flex; height: 100%; flex-flow: row;}
	#index { flex: 1; background: white; }
	#quote-list { margin: 5px; }
	#quote-list > div { background: lightgray; padding: 5px; margin-bottom: 5px; }
	#show { flex: 2; background: pink; font-size: 4em; height: 100%;}
	#quote-wrapper { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 2.5em; text-align: center;}
	#quote-wrapper .author { font-size: .5em;}
	input { width: 100%; margin: 0; border: none; font-size: 2em; outline: none; padding: 4px;}
	#quote-input { background: lightblue; }
	#author-input { background: lightgreen;}
	</style>
	</head>
	<body>

	<div id="container">

	<div id="index">
	<div id="new-quote-form">
	<input id="quote-input" type="text" placeholder="enter quote..." autofocus>
	<input id="author-input" type="text" placeholder="who saids...">
	</div>

	<div id="quote-list"></div>
	</div>

	<div id="show">
	<div id="quote-wrapper">
	<div id="box">
	<div class="quote">WDI Quotes</div>
	<div class="author">DT</div>
	</div>
	</div>
	</div>

	</div>

	<script type="text/javascript" src="javascripts/jquery-1.11.0.js"></script>
	<script type="text/javascript" src="javascripts/underscore.js"></script>
	<script type="text/javascript" src="javascripts/backbone.js"></script>
	<script>
	var App = {}

	App.Quote = Backbone.Model.extend({
	});

	App.Quotes = Backbone.Collection.extend({
	model: App.Quote
	});

	App.AppView = Backbone.View.extend({
	events: {
	'keyup input': 'addQuote'
	},
	initialize: function() {
	this.quoteList = $('#quote-list');
	},

	addQuote: function(event) {
	if (event.which === 13) {
	var quoteBody = $('#quote-input').val();
	var slug = quoteBody.toLowerCase().replace(' ', '-');
	var quote = new App.Quote({body: quoteBody, slug: slug })
	App.quotes.add(quote);
	var view = new App.QuoteListItemView({ model: quote });
	this.quoteList.append(view.render().el);
	$('input').val('').first().focus();
	}
	}
	})


	App.QuoteListItemView = Backbone.View.extend({
	template: _.template('<div class="quote"><a href="#<%= slug %>"><%= body %></a> <span></div>'),
	// events: {
	// 'click a': 'showQuote'
	// },
	render: function() {

	var html = this.template(this.model.toJSON());
	this.$el.html(html);
	return this;
	},
	showQuote: function(e) {
	e.preventDefault();
	$('#quote-wrapper .quote').html(this.model.get('body'));
	$('#quote-wrapper .author').html('somebody');
	}
	});

	App.Router = Backbone.Router.extend({
	routes: {
	'': 'home',
	':quote': 'showQuote'
	},

	initialize: function() {
	App.appView = new App.AppView({ el: $('#container') });
	App.appView.render();

	},

	home: function() {
	},

	showQuote: function(paramSlug) {
	var quoteModel = App.quotes.findWhere({slug: paramSlug});

	if (quoteModel === undefined)
	return;

	$('#quote-wrapper .quote').hide().html(quoteModel.get('body')).fadeIn();
	$('#quote-wrapper .author').hide().html('somebody').fadeIn();
	}
	});

	$(document).ready(function() {

	App.quotes = new App.Quotes();
	App.router = new App.Router();
	Backbone.history.start();
	})

	</script>
	</body>
	</html>
No results found