0

I started writing out this question wanting to know how to fire off a lookup function when an observable property gets changed by another viewmodel, and am now questioning how I am approaching this problem. In any case, here is my scenario:

I have a page with a grid of items on it. The user clicks a button to edit an item, and we show an edit popup window that contains all of the original data along with detailed data about that record that isn't in the main grid object.

In the edit window I have a separate observable for the "working copy" of the data. When the user commits the changes by clicking the save button, my plan is to copy that over to the original object so that the changes are reflected in the grid.

Right now I am using the ko.postbox library to communicate between the two viewmodels. Both contain an observable to store the item that has been selected and kept in sync using "syncWith".

Here's an idea of what it looks like:

function MainVM()
{
    self = this;
    this.Item = ko.observable().syncWith("GridItem");

    this.Edit = function (item)
    {
         self.Item(item);
    }
}

function EditVM()
{
    self = this;

    this.SelectedItem = ko.observable().syncWith("GridItem");
    this.WorkingItem = ko.observable();

    this.RetrieveGridItemDetails = function (id)
    {
        // Ajax lookup to populate WorkingItem
    }
}

When a user clicks to edit an item... I would like the selected item to be published over to the edit window vm (already happening with syncWith) but then also perform an AJAX lookup to pull the rest of the information regarding that item (running out of ideas how to do this).

I've taken a look at manually subscribing to that particular observable, as well as using a computed observable within the edit window viewmodel to be able to call the separate lookup function, but so far I have been unable to figure out a working solution :(

Am I going down the wrong path with my current line of thinking or does anyone know how I can go about performing that lookup?

1 Answer 1

0

I have still not been able to get everything to work properly using syncWith, however I have been able to get the lookup call to be made using subscribeTo in the following fashion:

SelectedItem = ko.observable<Item>().subscribeTo("GridItem", true, (item) => {
    if (item != null) {

        this.RetrieveItem(item.HeaderID());

        return item;
    }
    return new Item();
});

*Note: This is the Typescript Implementation

For now this will allow me to continue, and I will need to tackle any sync issues back to the main vm when I come to that part.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.