CAN COMPUTE

Includes jQuery, CanJS and all of its plugins. Use it as a starting point when you want to demo something.

by cherif_b

HTML

<script src="http://canjs.us/release/latest/can.jquery.js"></script>
<script src="http://canjs.us/release/latest/can.construct.proxy.js"></script>
<script src="http://canjs.us/release/latest/can.control.plugin.js"></script>
<script src="http://canjs.us/release/latest/can.observe.attributes.js"></script>
<script src="http://canjs.us/release/latest/can.observe.backup.js"></script>
<script src="http://canjs.us/release/latest/can.observe.delegate.js"></script>
<script src="http://canjs.us/release/latest/can.observe.setter.js"></script>
<script src="http://canjs.us/release/latest/can.observe.validations.js"></script>
<script src="http://canjs.us/release/latest/can.view.modifiers.js"></script>
<script src="http://canjs.us/release/latest/can.fixture.js"></script>
<script src="http://canjs.us/release/latest/can.view.mustache.js"></script>
<script src="http://canjs.us/release/latest/can.construct.super.js"></script>

CSS

.header {
    background: #E1E3E1;
    padding: 10px 0;
    border-bottom: 1px solid #B5B6B5;
    margin-bottom: 15px;
}
h1 {
    font-size: 24px;
    font-weight: bold;
}
p {
    margin: 10px 0;
}

JavaScript

var Person = can.Observe({
    fullName: can.compute(function (fullName) {
        if (typeof fullName === "undefined") {
            return this.attr('firstName') + " " + this.attr("lastName");
        } else {
            var parts = fullName.split(/\s+/);
            this.attr('lastName', parts.pop());
            this.attr('firstName', parts.pop());
        }
    })
});

person = new Person({
    firstName: "Cherif",
    lastName: "me"
});

person2 = new Person({
    firstName: "John",
    lastName: "Doe"
});

person.fullName();

var tmpl = can.view.ejs("<span><%= this.person.fullName() %></span>");

$(document.body)
    .append(tmpl({
    person: person
}))
append('<br/>')
    .append(tmpl({
    person: person2
})); // You will see "John Doe";

//person.attr('firstName', "David") // Now you see "David Doe"
//person.fullName("CHERIF ME") // Now you see "Marry Poppins" :)
//person.attr('lastName') // -> Poppins