Sometimes in a Durandal viewmodel, the view is not necessarily attached when the viewAttached() function is called

Question

Sometimes in a Durandal viewmodel, the view is not necessarily attached when the viewAttached() function is called

I implemented a ViewModel in Durandal with a function called viewAttached().

As mentioned in the documentation, this function is supposed to be executed after the view is attached to the DOM.

Within my function, there is a jQuery selector targeting an element in the View that is being attached:

function viewAttached() {
    console.log( $("#myViewId").length );
}

Most of the time, it correctly returns "1" to the console, but occasionally around 10% of the time, it returns 0. This indicates that the view is not yet fully attached to the DOM.

Has anyone encountered a similar issue?

javascript mvvm durandal

Answer 1

Answer №1

viewAttached receives the generated DOM subtree as a parameter.

One option is to modify the code like this

function viewAttached(view) {
    console.log( $(view).length );
}

if you want to encompass the entire view with jQuery or to

function viewAttached(view) {
    console.log( $(view).find('mySubSelector').length );
}

if you need to interact with specific elements in the subtree.

Answer 2

viewAttached receives the generated DOM subtree as a parameter.

One option is to modify the code like this

function viewAttached(view) {
    console.log( $(view).length );
}

if you want to encompass the entire view with jQuery or to

function viewAttached(view) {
    console.log( $(view).find('mySubSelector').length );
}

if you need to interact with specific elements in the subtree.

Answer 3

Answer №2

It is important to take note of a few things:

The event viewAttached occurs after the current module's view is attached to its direct parent, not necessarily when it is attached to the DOM. This can be limiting in some situations. In Durandal 2.0, we are introducing a new callback called documentAttached which will trigger when everything is attached to the page's DOM.
The viewAttached event provides the view for the current module. Utilize this to provide context to any jQuery code you may write.

Answer 4

It is important to take note of a few things:

The event viewAttached occurs after the current module's view is attached to its direct parent, not necessarily when it is attached to the DOM. This can be limiting in some situations. In Durandal 2.0, we are introducing a new callback called documentAttached which will trigger when everything is attached to the page's DOM.
The viewAttached event provides the view for the current module. Utilize this to provide context to any jQuery code you may write.

Sometimes in a Durandal viewmodel, the view is not necessarily attached when the viewAttached() function is called

Answer №1

Answer №2

Similar questions

"Vue Filepond: Enhancing Your Images with Cropping

ExpressJS subclasses are failing to inherit attributes and properties in callback functions

Issue with displaying the glyphicon-chevron on the carousel control

What is the reason for Chrome allowing the preflight OPTIONS request of an authenticated CORS request to function, while Firefox does not?

Creating fresh CSS by extracting essential selectors from an existing CSS file using Javascript

Halt the countdown of a Jquery or Javascript timer

What is the best method for obtaining a spring controller's object using AJAX?

Unusual case of missing lines while reading a file using readline.createInterface()

Issues with Submitting Form using Jquery, PHP, and Mysql

Guide to dynamically swapping one SVG icon with another SVG icon using AngularJS

Can you provide a guide on how to retrieve an HTML file using JSON?

Execute two different functions in AngularJS using ng-click in any order

Tips for emphasizing a specific cell in a row based on its expiration date

form data not being populated in req.body

Enhance your Vue router's scroll behavior with tips on navigating route values

Struggling to create an access token with the Slack API

Having trouble with the side menu navigation in Bootstrap?

Div's external dimension not being computed

By default, the select option in AngularJS will have a value of either an object or null

Image proxy in Node.js