YQL Model Sync Example

An example showing off the YUI App Framework using the YQL Model Sync Gallery module for data fetching. http://yuilibrary.com/gallery/show/model-sync-yql

by jhegeduis

HTML

<div id="container"></div>

CSS

.user {
    margin: 10px 0;
}

.user img {
    width: 40px;
    display: inline-block;
    border: 0;
    vertical-align: middle;
}

.user .name {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}
input,
select {
  padding: 0.49em 0.6em;
  display: inline-block;
  margin: 0;
  border: 1px solid #c9d0e8;
  font-size: 0.8em;
  box-shadow: inset 0 1px 3px #dbe0f0;
  border-radius: 4px;
  -webkit-transition: 0.3s linear border;
  -moz-transition: 0.3s linear border;
  -ms-transition: 0.3s linear border;
  -o-transition: 0.3s linear border;
  transition: 0.3s linear border;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

input:focus,
select:focus {
  outline: 0;
  outline: thin dotted \9; /* IE6-9 */
  border-color: #129FEA;
}
.yui3-checkbox,
.yui3-radio {
  margin: 0.5em 0;
}
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
  cursor: not-allowed;
  background-color: #eaeded;
  color: #cad2d3;
  border-color: transparent;
}
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
  color: #b94a48;
  border: 1px solid #ee5f5b;
}
input:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus {
  border-color: #e9322d;
}
select {
  width: 220px;
  border: 1px solid #ccc;
  background-color: white;
}
select[multiple] {
  height: auto;
}
label {
  display: block;
  margin: 0.5em 0 0.3em;
  vertical-align: middle;
  color: #999;
  font-size:90%;
}
fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}
legend {
  display: block;
  width: 100%;
  padding: 0.3em 0;
  margin-bottom: 0.7em;
  font-size: 125%;
  line-height: 1.6em;
  color: #333;
  border-bottom: 1px solid #e5e5e5;
}

.yui3-form-inline input,
.yui3-form-horizontal input,
.yui3-form-inline textarea,
.yui3-form-horizontal textarea,
.yui3-form-inline select,
.yui3-form-horizontal select,
.yui3-form-inline...

JavaScript

YUI({
    gallery : 'gallery-2011.08.24-23-44'
}).use('model', 'model-list', 'view', 'cache-offline', 'gallery-model-sync-yql', function (Y) {


    var GitHub = Y.namespace('GitHub'),
        org    = prompt('Enter a GitHub Organization Name:', 'yui') || 'yui';
    
    GitHub.User = Y.Base.create('gitHubUser', Y.Model, [], {}, {
        ATTRS : {
            login      : {},
            url        : {},
            avatar_url : {}
        }
    });
    
    GitHub.Users = Y.Base.create('gitHubUsers', Y.ModelList, [Y.ModelSync.YQL], {
        model : GitHub.User,
        cache : new Y.CacheOffline(),
        query : 'SELECT * FROM json WHERE url="https://api.github.com/orgs/{org}/members" ' +
                'AND itemPath="json.json"',
        
        parse : function (results) {
            return (results && results.json) || [];
        }
    });
    
    GitHub.UserView = Y.Base.create('gitHubUserView', Y.View, [], {
        model     : GitHub.User,
        container : '<li class="user" />',
        template  : '<a href="{url}"><img src="{avatar_url}" />' +
                        '<span class="name">{login}</span></a>',
        
        initializer : function () {
            this.model.after('change', this.render, this);
        },
        
        render : function () {
            var content = Y.one(Y.config.doc.createDocumentFragment());
            content.append(Y.Lang.sub(this.template, this.model.toJSON()));
            this.container.setContent(content);
            return this;
        },
    });
    
    GitHub.UsersView = Y.Base.create('gitHubUsersView', Y.View, [], {
        container     : Y.one('#container'),
        titleTemplate : '<h1>The <a href="{url}">{org}</a> Team ({num} members)</h1>',
        
        initializer : function (config) {
            config || (config = {});
            this.users = config.users;
            this.users.after('reset', this.render, this);
        },
        
        render : function () {
            var...