18/07/2012 Development / java script

Como fazer um grid em 30 segundos com knockout!

        <div data-bind="foreach: items">
            <p>First name: <input data-bind="value: name" /></p>
            <p>Last name: <input data-bind="value: sales" /></p>
            <h2>Hello, <span data-bind="text: price"> </span>!</h2>
            <hr size="1" />
        </div>

        <button type="button" data-bind="click: addItem">Add</button>
        <button type="button" data-bind="click: removeItem">Remove</button>
        <script>
            var GridModel = function (items) {
                this.items = ko.observableArray(items);

                this.addItem = function () {
                    this.items.push({ name: "New item", sales: Math.round(Math.random() * 100), price: Math.round(Math.random() * 100) });
                };

                this.removeItem = function () {
                    this.items.pop();
                };
            };


            var initialData = [
             { name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
             { name: "Speedy Coyote", sales: 89, price: 190.00 },
             { name: "Furious Lizard", sales: 152, price: 25.00 },
             { name: "Indifferent Monkey", sales: 1, price: 99.95 },
             { name: "Brooding Dragon", sales: 0, price: 6350 },
             { name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
             { name: "Optimistic Snail", sales: 420, price: 1.50 }
            ];

            ko.applyBindings(new GridModel(initialData));
        </script>

Espero que sirva!