Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Matreshka Collections Example</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        @import url("http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
    </style>
    <script src="http://cdn.jsdelivr.net/matreshka/latest/matreshka.min.js"></script>
</head>
<body>
    <table class="table users">
        <thead>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
        </thead>
        <tbody></tbody>
    </table>
  
    <script type="text/html" id="user_template">
        <tr>
            <td class="name"></td>
            <td class="email"></td>
            <td class="phone"></td>
        </tr>
    </script>
  
    <ul class="list"></ul>
    <script type="text/html" id="user_li_template">
        <li></li>
    </script>
    
    <script>
        var data = [{
            name: 'Ida T. Heath',
            email: 'ida@dayrep.com',
            phone: '507-879-9766'
        }, {
            name: 'Robert C. Burkhardt',
            email: 'rburkhardt@teleworm.us',
            phone: '321-252-5698'
        }, {
            name: 'Gerald S. Reaves',
            email: 'gsr@rhyta.com',
            phone: '765-431-5347'
        }]
    </script>
    <script src="users.js"></script>
</body>
</html>
 
var User = Class({
    'extends': MK.Object,
    bindRenderedAsSandbox: false,
    constructor: function( data ) {
        this.jset( data );
        
        this.on( 'render', function( evt ) {
            if( evt.parentArray instanceof TableUsers ) {
                this
                    .bindNode({
                        tableRow: evt.node,
                        name: ':bound(tableRow) .name',
                        email: ':bound(tableRow) .email',
                        phone: ':bound(tableRow) .phone'
                    }, {
                        setValue: function( v ) {
                            this.innerHTML = v;
                        }
                    })
                ;
            } else if( evt.parentArray instanceof ListUsers ) {
                this
                    .bindNode({
                        listItem: evt.node,
                        name: ':bound(listItem)',
                    }, {
                        setValue: function( v ) {
                            this.innerHTML = v;
                        }
                    })
                ;
            }
        });
    }
});
var TableUsers = Class({
    'extends': MK.Array,
    Model: User,
    itemRenderer: '#user_template',
    constructor: function( data ) {
        this
            .bindNode( 'sandbox', '.users' )
            .bindNode( 'container', ':sandbox tbody' )
            .recreate( data )
        ;
    }
});
var tableUsers = new TableUsers( data );
var ListUsers = Class({
    'extends': MK.Array,
    Model: User,
    itemRenderer: '#user_li_template',
    constructor: function( data ) {
        this
            .bindNode( 'sandbox', '.list' )
            .recreate( data )
        ;
    }
});
var listUsers = new ListUsers( tableUsers );
Output

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

Dismiss x
public
Bin info
finompro
0viewers