index.html | searchcode

/index.html

https://bitbucket.org/titogelo/yahoo-pipes-with-backbone-bootstrap
HTML | 151 lines | 143 code | 8 blank | 0 comment | 0 complexity | 864f1572918e8bcb64644ca4003c4efb MD5 | raw file

<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
	<title>Backbase, Backbone & Yahoo pipes</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript" src="http://backbonejs.org/test/vendor/underscore.js"></script>
	<script type="text/javascript" src="http://backbonejs.org/backbone.js"></script>
	<script type="text/javascript">
		$(function(){
		    var Pipe = Backbone.Model.extend();

		    var Pipes = Backbone.Collection.extend({
		        model: Pipe,
		        parse: function(response, xhr) {
		            return response.value.items.slice(0,10);
		        }
		    });
		    var PipeView = Backbone.View.extend({
		        el: $('.navbar-inner .container'),
		        cont: $('.row-fluid'),
		        initialize: function() {
		            _.bindAll(this,  'addPipe');
		            this.pipes = new Pipes();
		            var that = this;
		            this.counter = 0;
		            this.pipes.url = 'http://pipes.yahoo.com/pipes/pipe.run?_id=DqsF_ZG72xGLbes9l7okhQ&_render=json&callback=news' ;
		            this.pipes.fetch({
		                success: function(response,xhr) {
		                    response.each(function(data) {
		                            that.counter += 1;
		                            //console.log(data)
		                            that.addPipe(data, that.counter);                        
		                    });
		                },
		                error: function (errorResponse) {
		                    console.log(errorResponse)
		                }
		            });
		        },
		        addPipe: function(item, i) {
		            $(this.cont).append("<div class='span4'><h4>"+i+". "+item.get('title')+"</h4><p>" +item.get("description") + "</p><p><a href='" + item.get("link") + "'>Link</a></p></div>");
		            if (i % 3 == 0) {
		                $(this.cont).after("<div class='row-fluid r"+i+"'></div>");
		                this.cont = $('.row-fluid.r'+i);
		            };
		        }
		    });
		    var pipeView = new PipeView();

		});
	</script>
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
    <link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 20px;
        padding-bottom: 60px;
      }

      /* Custom container */
      .container {
        margin: 0 auto;
        max-width: 1000px;
      }
      .container > hr {
        margin: 60px 0;
      }

      /* Main marketing message and sign up button */
      .jumbotron {
        margin: 80px 0;
        text-align: center;
      }
      .jumbotron h1 {
        font-size: 100px;
        line-height: 1;
      }
      .jumbotron .lead {
        font-size: 24px;
        line-height: 1.25;
      }
      .jumbotron .btn {
        font-size: 21px;
        padding: 14px 24px;
      }

      /* Supporting marketing content */
      .marketing {
        margin: 60px 0;
      }
      .marketing p + h4 {
        margin-top: 28px;
      }


      /* Customize the navbar links to be fill the entire space of the .navbar */
      .navbar .navbar-inner {
        padding: 0;
      }
      .navbar .nav {
        margin: 0;
        display: table;
        width: 100%;
      }
      .navbar .nav li {
        display: table-cell;
        width: 1%;
        float: none;
      }
      .navbar .nav li a {
        font-weight: bold;
        text-align: center;
        border-left: 1px solid rgba(255,255,255,.75);
        border-right: 1px solid rgba(0,0,0,.1);
      }
      .navbar .nav li:first-child a {
        border-left: 0;
        border-radius: 3px 0 0 3px;
      }
      .navbar .nav li:last-child a {
        border-right: 0;
        border-radius: 0 3px 3px 0;
      }
    </style>
</head>
<body>
	<div class="container">
      <div class="masthead">
        <h3 class="muted">Angel Suarez</h3>
        <div class="navbar">
          <div class="navbar-inner">
            <div class="container">
            	<ul class="nav">
                <li class="active"><a href="#">Yahoo pipes exercise</a></li>
                <li><a href="http://www.backbase.com">Backbase's web</a></li>
                <li><a href="http://backbonejs.org/">Backbone's web</a></li>
                <li><a href="http://nl.linkedin.com/pub/%C3%A1ngel-su%C3%A1rez-fern%C3%A1ndez/23/58b/206/en">Personal Linkedin</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="row-fluid">
      </div>
      <hr>
      <div class="footer">
        <p>© Backbase 2013</p>
      </div>

    </div>
</body>
</html>