Benutzer:MovGP0/Knockout

function AppViewModel() {    // OBSERVABLE VARIABLES    this.firstName = ko.observable("Bert");    this.lastName = ko.observable("Bertington");    // COMPUTED VALUES    this.fullName = ko.computed(function() {        return this.firstName() + " " + this.lastName();        }, this);        // EVENT HANDLER     this.capitalizeLastName = function() {        var currentVal = this.lastName();        // Read the current value        this.lastName(currentVal.toUpperCase()); // Write back a modified value    };}

// Class to represent a row in the seat reservations gridfunction SeatReservation(name, initialMeal) {    var self = this;    self.name = name;    self.meal = ko.observable(initialMeal);    self.formattedPrice = ko.computed(function() {        var price = self.meal().price;        return price ? "$" + price.toFixed(2) : "None";            });    }// Overall viewmodel for this screen, along with initial statefunction ReservationsViewModel() {    var self = this;    // Non-editable catalog data - would come from the server    self.availableMeals = [        { mealName: "Standard (sandwich)", price: 0 },        { mealName: "Premium (lobster)", price: 34.95 },        { mealName: "Ultimate (whole zebra)", price: 290 }    ];        // Editable data    self.seats = ko.observableArray([        new SeatReservation("Steve", self.availableMeals[0]),        new SeatReservation("Bert", self.availableMeals[0])    ]);    // Computed data    self.totalSurcharge = ko.computed(function() {       var total = 0;       for (var i = 0; i < self.seats().length; i++)           total += self.seats()[i].meal().price;       return total;    });        // Operations    self.addSeat = function() {        self.seats.push(new SeatReservation("", self.availableMeals[0]));    }    self.removeSeat = function(seat) { self.seats.remove(seat) }}ko.applyBindings(new ReservationsViewModel());

function WebmailViewModel() {    // Data    var self = this;    self.folders = ['Inbox', 'Archive', 'Sent', 'Spam'];    self.chosenFolderId = ko.observable();    self.chosenFolderData = ko.observable();    self.chosenMailData = ko.observable();    // Behaviours        self.goToFolder = function(folder) { location.hash = folder };    self.goToMail = function(mail) { location.hash = mail.folder + '/' + mail.id };    // Client-side routes        Sammy(function() {        this.get('#:folder', function() {            self.chosenFolderId(this.params.folder);            self.chosenMailData(null);            $.get("/mail", { folder: this.params.folder }, self.chosenFolderData);        });        this.get('#:folder/:mailId', function() {            self.chosenFolderId(this.params.folder);            self.chosenFolderData(null);            $.get("/mail", { mailId: this.params.mailId }, self.chosenMailData);        });            this.get('', function() { this.app.runRoute('get', '#Inbox') });    }).run();    };ko.applyBindings(new WebmailViewModel());

// ----------------------------------------------------------------------------// Reusable bindings - ideally kept in a separate fileko.bindingHandlers.fadeVisible = {    init: function(element, valueAccessor) {        // Start visible/invisible according to initial value        var shouldDisplay = valueAccessor();        $(element).toggle(shouldDisplay);    },    update: function(element, valueAccessor) {        // On update, fade in/out        var shouldDisplay = valueAccessor();        shouldDisplay ? $(element).fadeIn() : $(element).fadeOut();    } };ko.bindingHandlers.jqButton = {    init: function(element) {       $(element).button(); // Turns the element into a jQuery UI button    },    update: function(element, valueAccessor) {        var currentValue = valueAccessor();        // Here we just update the "disabled" state, but you could update other properties too        $(element).button("option", "disabled", currentValue.enable === false);    }    };ko.bindingHandlers.starRating = {    init: function(element, valueAccessor) {        $(element).addClass("starRating");        for (var i = 0; i < 5; i++)           $("<span>").appendTo(element);               // Handle mouse events on the stars        $("span", element).each(function(index) {            $(this).hover(                function() { $(this).prevAll().add(this).addClass("hoverChosen") },                 function() { $(this).prevAll().add(this).removeClass("hoverChosen") }                            ).click(function() {                 var observable = valueAccessor();  // Get the associated observable                observable(index+1);               // Write the new rating to it            });        });                },    update: function(element, valueAccessor) {        // Give the first x stars the "chosen" class, where x <= rating        var observable = valueAccessor();        $("span", element).each(function(index) {            $(this).toggleClass("chosen", index < observable());        });    }    };// ----------------------------------------------------------------------------// Page viewmodelfunction Answer(text) { this.answerText = text; this.points = ko.observable(1); }function SurveyViewModel(question, pointsBudget, answers) {    this.question = question;    this.pointsBudget = pointsBudget;    this.answers = $.map(answers, function(text) { return new Answer(text) });    this.save = function() { alert('To do') };               this.pointsUsed = ko.computed(function() {        var total = 0;        for (var i = 0; i < this.answers.length; i++)            total += this.answers[i].points();        return total;            }, this);}ko.applyBindings(new SurveyViewModel("Which factors affect your technology choices?", 10, [   "Functionality, compatibility, pricing - all that boring stuff",   "How often it is mentioned on Hacker News",       "Number of gradients/dropshadows on project homepage",           "Totally believable testimonials on project homepage"]));

function Task(data) {    this.title = ko.observable(data.title);    this.isDone = ko.observable(data.isDone);}function TaskListViewModel() {    // Data    var self = this;    self.tasks = ko.observableArray([]);    self.newTaskText = ko.observable();    self.incompleteTasks = ko.computed(function() {        return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() && !task._destroy });    });    // Operations    self.addTask = function() {        self.tasks.push(new Task({ title: this.newTaskText() }));        self.newTaskText("");    };    self.removeTask = function(task) { self.tasks.destroy(task) };    self.save = function() {        $.ajax("/tasks", {            data: ko.toJSON({ tasks: self.tasks }),            type: "post", contentType: "application/json",            success: function(result) { alert(result) }        });    };    // Load initial state from server, convert it to Task instances, then populate self.tasks    $.getJSON("/tasks", function(allData) {        var mappedTasks = $.map(allData, function(item) { return new Task(item) });        self.tasks(mappedTasks);    });    }ko.applyBindings(new TaskListViewModel());