Adding additional data to object in Knockout.js

Question

So I've been learning Knockout.js and am really digging it. I'm using it to add some SQL interaction to a guest list on an events website I'm working on. I'm using destroy to mark entries for deletion and handling that by using 'isset' in PHP to mark them as deleted in the DB.

I want to add some sort of functionality to do the same thing when records are updated. It seems unnecissary to update every single record (even know we're only talking 300 updates at the max) when they haven't actually be changed when I send the JSON back to the server. If anyone with more experience working with Knockout can help me out, it would be much appreciated.

Here's my javascript. The markup and data binding is fairly basic so I wont include it.

function Guest(data){
    this.id = ko.observable(data.id);
    this.name = ko.observable(data.name);
    this.email = ko.observable(data.email);
    this.guests = ko.observable(data.guests);
    this.code = ko.observable(data.code);
}

function guestListViewModel(){
    //Data
    var self = this;
    self.guests = ko.observableArray([]);
    self.guestsNumber = 0;

    $.getJSON('/php/guests_json.php', function(json) {
        var mappedGuests = $.map(json, function(item) { return new Guest(item) });
        self.guests(mappedGuests);
        self.guestsNumber = (self.guests().length);
        $('.dlt_btn').button();

    });

    self.removeGuest = function(guest) { 
        self.guests.destroy(guest);
    };

    self.save = function() {
        var data = 'json=' + ko.toJSON({guests: self.guests });
        $.ajax("/php/save_guests.php", {
            data: data,
            type: "post",
            success: function(result) {$('#server').html(result)}
        })
    }

    self.totalGuests = ko.computed(function() {
        var total = 0;
        ko.utils.arrayForEach(self.guests(), function(guest) {
            var value = guest.id;
            console.log(value);
            if (!isNaN(value)) {
                total += value;
            }
        });
        return total;        
    });

}

ko.applyBindings(new guestListViewModel);

Edit

Also, does anyone have any idea why when I'm trying to go through the observable array and pull out the guests value I get a function instead in the console?

user24359 · Accepted Answer · 2012-10-19 01:19:53Z

1

Wrap your guest objects with a computed that determines if they're dirty (i.e. edited). Here's a full guide on how to do it:

http://www.knockmeout.net/2011/05/creating-smart-dirty-flag-in-knockoutjs.html

Then, you can just submit the ones for whom _isDirty() is true.

answered Oct 19, 2012 at 1:19

user24359

Sign up to request clarification or add additional context in comments.

3 Comments

Throttlehead Over a year ago

You don't by chance have any idea why the code above is giving me a function instead of the value I want in the 'self.totalGuests' function?

user24359 Over a year ago

@Jacob, yup, the id property of Guest is an observable, so you need var value = guest.id();. It's for the same reason that you needed self.guests() instead of just self.guests. Separately, do you really mean to sum the ids, or did you mean to say guest.guests()?

Throttlehead Over a year ago

Thanks for your help Isaac. I've gotten the hang of the library now. Really cool stuff.

Collectives™ on Stack Overflow

Adding additional data to object in Knockout.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related