Ember Test

by amindunited

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="https://github.com/downloads/emberjs/ember.js/ember-1.0.pre.js"></script>
<script type="text/x-handlebars">
    {{#collection contentBinding="Coffees.favoritesController" tagName="ul"}}
        <div class="fav" {{ action magoo target="Coffees.coffeeController" on="click"}}>
<div>
                <img {{bindAttr src="view.content.url"}} width="200px" />
            </div>
            <div class="title"><b>Name: </b>{{view.content.title}}</div>
            <div><b>Date: </b>{{view.content.date}}</div>    
        </div>
    {{/collection}}
</script>
<script type="text/x-handlebars">

        <button {{ action loadCoffees target="Coffees.coffeeController" }}>
    Load Coffees</button>

        {{#collection contentBinding="Coffees.coffeeController" tagName="ul"}}
            <div {{ action add target="Coffees.coffeeController" on="click"}}>
                <img {{bindAttr src="view.content.url"}} width="200px" />
            </div>
            <div class="title"><b>Name: </b>{{view.content.title}}</div>
            <div><b>Date: </b>{{view.content.date}}</div>
        {{/collection}}
</script>

CSS

ul { background-color: #363636; text-align:center;}
li {
    background-color: #bcbcbc;
    display: inline-block;
    padding:5px;
    margin:5px;
    border:inset 1px #9a9a9a;
    border-radius: 5px;
    width:200px
        font-size:6px;
}
li:hover {
    background-color: #cdcdcd;
    border:solid 1px #0072ed;
    border-radius: 5px;
}
li img:hover {
    border:solid 1px #3372ef;
    border-radius: 5px;
}
li div {
 text-align: left;   
}
li img {
    border:inset 1px #9a9a9a;
    border-radius: 5px;
}
.fav:before{
content:"Favorite!"
}
.fav {
    background-color: #B78D8D;
    text-align:center;
    border-radius: 5px;
    padding: 2px;
}

JavaScript

$(function(){
//"http://picasaweb.google.com/data/feed/api/user/buckley.robin/albumid/5751950773409336513" + '' +'?alt=json&thumbsize=' + '200'
    Coffees = Ember.Application.create({
        ready: function(){
            // alert('you did it!');
        }
    });
    
    Coffees.Coffee = Ember.Object.extend({
        title: '',
        url: '',
        date: '',
        getInfo : function () {
            returnObject = {
                title: this.get('title'),
                url: this.get('url'),
                date: this.get('date'),
                getInfo : this.getInfo
            }
        }
    });
    
    Coffees.coffeeController = Ember.ArrayController.create({
        content: [],
        loadCoffees: function(){
            var self = this;
            //var url = 'data/books.json';
            url = "http://picasaweb.google.com/data/feed/api/user/buckley.robin/albumid/5751950773409336513" + '' +'?alt=json&thumbsize=' + '200';
            $.getJSON(url, function(data) {
                console.log(data);
                data.feed.entry.forEach(function(item){
                    var _date = new Date(parseInt(item.gphoto$timestamp.$t));
                    _date = _date.toDateString();
                    self.pushObject(Coffees.Coffee.create({
                        url:item.content.src,
                        date:_date,//item.gphoto$timestamp.$t,
                        title:item.title.$t
                    }));
                });
            });
        },
        add : function( e ){
            //alert("aaaaad");
            //console.log($(e.target).closest("li").attr('id'));
            //var item = (Ember.View.views[$(e.target).closest("li").attr('id')]);
            var title = $(e.target).parent().siblings(".title").text()
            title = title.replace("Name: ", '');
            console.log(typeof title)
            var item = this.get('content').filterProperty('title', title).get('firstObject');
           ...