Click here to Skip to main content
15,879,239 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi,

I am trying to implement a filtering in my knockout application using a AJAX get and i want to update only one of the many observables in the viewmodel.
This is my viewmodel here in JS

JavaScript
function containerViewModel() {
    mainViewModel = this;
    mainViewModel.isBusy = ko.observable(false);
    mainViewModel.errorMessage = ko.observable("");
    mainViewModel.containerModel = ko.observable(
        {
            HomeSettings: ko.observable(),
            Employee: ko.observable({ HeaderText: '', BodyText: '', FooterText: '' }),
            Class: ko.observable({ HeaderText: '', BodyText: '', FooterText: '' }),
            Degree: ko.observable({ HeaderText: '', BodyText: '', FooterText: '' }),
            Specialization: ko.observable({ HeaderText: '', BodyText: '', FooterText: '' }),
            IDEAData: ko.observable({ HeaderText: '', BodyText: '', FooterText: '' })
        }
        );

    GET_AllContainer(mainViewModel);
}


Each of these observables are shown in different tabs and each tab has filter buttons. When i click the filter button from any tab, i fetch the data using ajax call. But the problem is am getting the whole data and binding to the viewmodel as this

JavaScript
function GET_FilteredContainer(mainView, filterText, productID, FilterID) {
    mainViewModel.isBusy(true);
    $.ajax({
        url: hostApi + api_GetAllContainer,
        contentType: "json",
        data: { FilterLinkIds: filterText, ProductID: productID },
        success: function (result) {
            mainView.containerModel(result);            
            SetFilterButtonCSS(productID, FilterID);
            ProductReportsNotFound(result);
            mainViewModel.isBusy(false);
        },
        error: function (result) {
            mainViewModel.errorMessage(result);
            mainViewModel.isBusy(false);
        }
    });

}


But this means it will clear the filter of other tabs. So is there any way i can update only the required observable only

Thanks
Posted
Comments
Black Mamba Elapidae 20-Aug-15 6:44am    
Cant you just do something like mainView.containerModel.Employee(result.Employee) ????
Arjun Menon U.K 22-Aug-15 3:31am    
Its throwing an error. Uncaught TypeError: mainview.containerModel(...).Employee is not a function.
Arjun Menon U.K 23-Aug-15 5:04am    
ERPData: Object
BodyText: "BodyText"
Filters: Array[7]
0: Object
1: Object
2: Object
3: Object
4: Object
5: Object
6: Object
FooterText: "FooterText"
HeaderText: "HeaderText"
IconImage: "img/assad.jpg"
IconText: ""
IsVisible: true
Navigations: Array[37]
0: Object
1: Object
2: Object
3: Object
4: Object
5: Object
6: Object
7: Object
8: Object
9: Object
10: Object
11: Object
12: Object
13: Object
14: Object
15: Object
16: Object
17: Object
18: Object
19: Object
20: Object
21: Object
22: Object
23: Object
24: Object
25: Object
26: Object
27: Object
28: Object
29: Object
30: Object
31: Object
32: Object
33: Object
34: Object
35: Object
36: Object
PageTitle: "Title"
ProductGUId: "2"
ProductId: 1
HomeSettings: Object
IDEAData: Object
KPIData: Object
QlikViewData: Object
ScreeningData: Object
TopNavigations: null
iJETData: Object

JSON data after ajax

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900