EmberJS template

by savid

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.8.1.js"></script>
<script type="text/x-handlebars">
    {{#view Ember.View}}
    <h1>Test</h1>
    {{#collection contentBinding="productsController.products" tagName="ul"}}
    <li>{{ content.name }}: {{view Ember.TextField valueBinding="content.price"}}</li>
    {{/collection}}
    <p><strong>Total: {{ calculator.total }}</strong></p>
    {{/view}}
</script>

JavaScript

Product = Ember.Object.extend({
    name: null,
    price: null
});

productsController = Ember.Object.create({
    products: function(){
        return [
            Product.create({name: 'Foo', selected: true}),
            Product.create({name: 'Bar', selected: true}),
            Product.create({name: 'Baz', selected: true}),
            Product.create({name: 'Qux', selected: false})
        ];
    }.property(),
    selectedProducts: function() {
        console.log(self.get('products'));
        return $.map(self.get('products'), function(product) {
            return product.get('selected') ? product : null;
        });
    }.property('products', '[email protected]').volatile()
});

calculator = Ember.Object.create({
    total: function(){
        console.log('test');
        var t = 0;
        var products = productsController.get('selectedProducts');
        products.forEach(function(product) {
            if (!isNaN(product.price)) t += product.price;
        });
        return t;
    }.property('[email protected]')
});