Deep two-way binding

by Jason Green

HTML

<script src="http://i.mol.im/cc/milo/237/dist/milo.bundle.js"></script>


<div ml-bind="[data container]:user">
    <form>
        <fieldset ml-bind="[data container]:profile">
            <legend>Profile:</legend>
            <p>Name: <input ml-bind="[data]:name"></p>
            <p>Age: <input ml-bind="[data]:age"></p>
            <p>Mobile: <input ml-bind="[data]:mobile"></p>
            <p>Email: <input ml-bind="[data]:email"></p>
        </fieldset>

        <fieldset ml-bind="[data container]:address">
            <legend>Address:</legend>
            <p>Line 1: <span ml-bind="[data]:line1"></span></p>
            <p>Line 2: <span ml-bind="[data]:line2"></span></p>
            <p>City: <span ml-bind="[data]:city"></span></p>
            <p>Postcode: <span ml-bind="[data]:postcode"></span></p>
        </fieldset>

        <fieldset ml-bind="[data container]:moreInfo">
            <legend>More Info:</legend>
            <fieldset ml-bind="[data container]:feeds">
                <legend>Feeds:</legend>
                News<input type="checkbox" ml-bind="[data]:news" />
                Sport<input type="checkbox" ml-bind="[data]:sport" />
                Fashion<input type="checkbox" ml-bind="[data]:fashion" />
                Videos<input type="checkbox" ml-bind="[data]:videos" />
                Politics<input type="checkbox" ml-bind="[data]:politics" />
            </fieldset>

            <fieldset>
                <legend>Friends:</legend>
                <ul ml-bind="[list]:friends">
                    <li ml-bind="[item]:friend">
                        <input type="text" ml-bind="[data]:name"> 
                        <input type="number" ml-bind="[data]:age">
                    </li>
                </ul>
            </fieldset>
        </fieldset>
    </form>
</div>

JavaScript

milo(function () {
    window.userModel = new milo.Model();
    
    var scope = milo.binder();
        
    milo.minder(userModel, '<<<<->>>>', scope.user.data, {
        pathTranslation: {
            '.profile': '.profile',
            '.profile.address': '.address',
            '.feeds': '.moreInfo.feeds',
            '.friends': '.moreInfo.friends'
        }
    });
    
    var userData = {
        profile: {
            name: "Jason Green",
            age: 31,
            mobile: "07 1234 567 890",
            email: "[email protected]",
            address: {
                line1: "20 London Road",
                line2: "",
                city: "London",
                postcode: "W2 0AJ"
            }
        },
    
        feeds: {
            news: true,
            sport: true,
            fashion: false,
            videos: false,
            politics: true
        },
    
        friends: [
            { name: "John", age: 41 },
            { name: "Sam", age: 34 },
            { name: "Amy", age: 28 },
            { name: "Sarah", age: 24 },
            { name: "Mike", age: 30 }
        ]
    };
     
    userModel.set(userData);
});