Knockout: Bind template bootstrap modal for many data objects

Question

I am relatively new in Javascript and Knockout JS and I am facing the problem below:

I load data from a Ajax request and map it into my object:

function ActivityModel(obj) {
        if (typeof (obj) != 'undefined') {
            this.ShowTable = ko.observable(true);
            this.Name = ko.observable(obj.nomVessel);
            this.NumRecords = ko.observable(obj.data.length);
            this.DataRecords = ko.observableArray([]);
            var aux = [];
            //When add new items, mark they as changed, so the update css style  will be loaded
            $.each(obj.data, function (index, value) {
                aux.push({ hasChanged: ko.observable(true), record: value });
            });
            this.DataRecords.push(aux);

        }
}

I store all objects into an observable Array named DataTables. Then, based on the data, I render a 'gadget', that is composed by a div with some buttons, and a table that loads my data records:


 
    
        
            
            
             - Activities
            
                
            
        
        
            
                
                    
                        
                            Start Date
                            Start Time
                            End Date
                            End Time
                            Details

Particularly, I have a button to open a bootstrap modal inside each gadget:

The code of the modal


        
            
                
                    
                    Configure gadget
                
                
                    
                        
                            
                                Set size
                                
                                    
                                        Rows:

My problem is: For each 'gadget' created, I would like to bind the button I've shown to open the modal. Moreover the input 'linhas' inside the modal should be bound to the observable NumRecords of my object. When I tried to bind using a simple click binding I have an unexpected behaviour that I changed the value of the input for one object (thus updating a single observable NumRecords) and the call was somehow broadcasted to the other gadgets on the screen. I also tried using a custom binding:

ko.bindingHandlers.UpdateActivityCount = {
init:function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    $('#modal-configure-gadget').on('show.bs.modal', function(e) {
        $('#linhasActivity').val(bindingContext.$data.NumActivities());
    });
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {

    $('#modal-configure-gadget .btn-success').on('click', function(e) {

        var confirm_button = $(e.target).is("#btnConfirmActivitiesChange");

        if (confirm_button === true) {
            //Update Value
            self.UpdateObservableValue(data.NumRecords, $('#linhasActivity'), 'int', data, event);
        }

    });
}
};

but the unexpected behaviour remained.

I suspect this behaviour is occurring because the id of the modal and its elements are the same of every gadget created (Instead having one modal for each gadget, I have just one modal for all of them and it is generanting a conflict). However, I do not know how to generate multiple modals with different ids (and different ids for the components such as buttons and inputs). I had a look at the component binding, but could not realise how it works and whether it would be useful to solve my problem.

Anyone has a suggestion?

Thanks.

Dandy · Accepted Answer

Some suggestions

at

you dont need to use the $data variable, since you are already inside a foreach context. You can replace it with

Also for modal dialog, you can have one dialog to show details of different objects. Something like

and the have a click binding for opening up the dialog like

and in your view model, add an observable and another click handler as

this.currentDialogDetails = ko.observable(null);
this.setCurrentDialogDetails = function(details){
  this.currentDialogDetails(details);
}

Knockout: Bind template bootstrap modal for many data objects

Answers (1)

Related Questions