Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Model Events Demo</title>
        <style type='text/css'>
            body {font-family: verdana}
            li {border: solid 1px gray; padding: 5px; width: 250px;}
            li a {color: red; font-weight: bold;}
            li li {width: auto; border: none;}
            p {width: 400px;}
        </style>
    </head>
    <body>
        <div id="demo-instructions">
        <h1>Model Associations Demo</h1>
        <p>This demo shows how you can setup associations.</p>
        </div>
<div id="demo-html">
<div id='contacts'></div>
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://cloud.github.com/downloads/bitovi/canjs/can.jquery-1.1.3.min.js"></script>
<script src="http://canjs.us/release/latest/can.observe.attributes.js"></script>
<script src="http://canjs.us/release/latest/can.fixture.js"></script>
<script>
$(function () {
    can.fixture("/contacts.json", function(){
        return [{'id': 1,'name' : 'Justin Meyer','birthday': '1982-10-20',
                    tasks : [{id: 1, title: "write up model layer", due: "2010-10-5"}]},
             {'id': 2,'name' : 'Brian Moschel','birthday': '1983-11-10',
                    tasks : [{id: 2, title: "write up funcunit", due: "2009-5-1"}, 
                             {id: 3, title: "test funcunit", due: "2010-3-15"}]},
             {'id': 3,'name' : 'Alex Gomes','birthday': '1980-2-10'}];
    })
​
    // A task model that has a date
    Task = can.Model({
        findAll : "/contacts.json",
        create : "/crate.json",
        update : "PUT http://localhost/development/playground/canjs/update.php"
    },{
        
    })
​
    // A contact model that has many tasks
    Contact = can.Model({
        attributes: {
            tasks: 'Task.models'
        },
        findAll : "/contacts.json"      
    },{     
    });
​
​
    // Get all contacts and put them on the page
    Contact.findAll({},function(contacts) {     
      var contactsEl = $('#contacts');
      $.each(contacts, function(i, contact){              
        var li = $('<li>')
                  .html(contact.name)
                  .appendTo(contactsEl);
                  
        var ul =$("<ul>");
        var tasks = contact.attr('tasks')
        if(tasks){
            tasks.each(function(){
                ul.append('<li>'+this.title+'</li>');
                this.save();
            })
        }
            
        ul.appendTo(li);        
      });
    });
});
</script>
    </body>
</html>
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers