What is the best way to invoke a function in one View Model from within another View Model?

Question

What is the best way to invoke a function in one View Model from within another View Model?

I am looking to divide my DevExtreme Scheduler into two separate view models. One will be responsible for displaying the Scheduler itself, while the other will handle the Popup and button functionality. Despite having everything set up, I am struggling to call a function within the Popup view model.

$(document).ready(function () {

    var schedulerModel = new viewModel();
    ko.applyBindings(schedulerModel, document.getElementById("BookingScheduler"));

    var popupModel = new viewPopup();
    ko.applyBindings(popupModel, document.getElementById("BookingPopup"));

});

Within my Scheduler, I have a click handler where I need to call the loadData function from the popup view model.

function viewPopup() {
   function loadData(data) {
   }
}

I attempted calling it using popup.loadData(data); and viewPopup().loadData(data);, but neither worked. I received an error stating popup.loadData() is not a function. How can I successfully achieve this?

javascript knockout.js

Answer 1

Answer №1

In most cases, a primary viewmodel is created and sub-viewmodels are bound using the with binding:

var MainApp = function() {
  this.taskManager = new TaskViewModel();
  this.modalWindow = new ModalView();
}

$(document).ready(function () {
  ko.applyBindings(new MainApp());
});

This would be represented in the HTML as:

<body>
  <div data-bind="with: taskManager" id="TaskManagerSection"></div>
  <div data-bind="with: modalWindow" id="ModalWindowSection"></div>
</body>

Although it is not typically recommended, you can access the other viewmodel by using $root.taskManager from modalWindow, and $root.modalWindow from taskManager.

An alternative approach could involve passing a reference to the modalWindow viewmodel during instantiation.

A third possibility is implementing a "postbox" design pattern (such as this plugin developed by R. Niemeyer).

Answer 2

In most cases, a primary viewmodel is created and sub-viewmodels are bound using the with binding:

var MainApp = function() {
  this.taskManager = new TaskViewModel();
  this.modalWindow = new ModalView();
}

$(document).ready(function () {
  ko.applyBindings(new MainApp());
});

This would be represented in the HTML as:

<body>
  <div data-bind="with: taskManager" id="TaskManagerSection"></div>
  <div data-bind="with: modalWindow" id="ModalWindowSection"></div>
</body>

Although it is not typically recommended, you can access the other viewmodel by using $root.taskManager from modalWindow, and $root.modalWindow from taskManager.

An alternative approach could involve passing a reference to the modalWindow viewmodel during instantiation.

A third possibility is implementing a "postbox" design pattern (such as this plugin developed by R. Niemeyer).

Answer 3

Answer №2

Within my scheduling system, I have a click event listener that needs to call the loadData function located in the popup view model.

Therefore, the scheduler viewmodel must have access to the popup view model. To accomplish this, switch the order of declaration and pass a reference as follows:

var popup = new viewPopup();
ko.applyBindings(popup, document.getElementById("BookingPopup"));
var model = new viewModel(popup);
ko.applyBindings(model, document.getElementById("BookingScheduler"));

Answer 4

Within my scheduling system, I have a click event listener that needs to call the loadData function located in the popup view model.

Therefore, the scheduler viewmodel must have access to the popup view model. To accomplish this, switch the order of declaration and pass a reference as follows:

var popup = new viewPopup();
ko.applyBindings(popup, document.getElementById("BookingPopup"));
var model = new viewModel(popup);
ko.applyBindings(model, document.getElementById("BookingScheduler"));

What is the best way to invoke a function in one View Model from within another View Model?

Answer №1

Answer №2

Similar questions

A guide to reordering table rows by drag-and-drop with JavaScript

Developing an ASP application using the MVP pattern to return JSON data can be transformed into a S

What is the best way to implement the addMore event in my custom slot components when working with Vue Formulate?

Observing the vertical dimension of a VueJS element

Apologies, the system encountered an issue while trying to access the "name" property which was undefined. Fortunately, after refreshing the page, the error was successfully resolved

What is the best way to adjust the fill animation of an inline svg based on the movement of the mouse within the parent div?

Is it feasible to convert a Google Drive spreadsheet into JSON format without needing the consent screen?

The prototype chaining for JavaScript inheritance was not functioning as expected

Finding alternative solutions without using the find() method when working with Angular

The plugin 'vue' specified in the 'package.json' file could not be loaded successfully

What is the simplest method for preserving the Redux state?

I encountered a "TypeError: Unable to access property 'name' of undefined" error when attempting to export a redux reducer

A stylish method for converting CSV data into XML format using Node.js and Express

Using the ternary operator in React to implement inline styles

Tips for enlarging the box width using animation

Ways to activate onChange multiple times for a single item within material ui's autocomplete feature

Show or hide side menu depending on when a div reaches the top of the

Activating list anchor upon click

Experiencing difficulty when attempting to save a zip file to the C drive

Struggling to locate a route for the React styled components image