Event when view rendered?

in General JavaScriptMVC » Uncategorised • 1 year ago

Hi! Newbie question here. Is there a 'view ready' event to listen to, when a view is rendered?

I have controller A with view A. In view A, a DOM element is created, with an id (like <span id="dom-A"></span>). When 'dom-A' is created, I want to attach another controller to it, say, controller B. But I don't know how to have a 'view ready' event and listener? I am using jmvc v 3.1.0 and I have been using the EJS templates so far.. thanks for the help!

Replies(7)

thecounto..

Re: Event when view rendered?

1 year ago

Views are rendered synchronously. So you can do something like:

$( SELECTOR ).html( "//myapp/views/view.ejs", { data: somedata } );
$( "#dom-A").your_plugin();

The second line won't execute until the previous one which loads the EJS template is complete and the DOM elements in it (including dom-A) are present.

Hope this helps,
Mike

theRegge

Re: Event when view rendered?

1 year ago

Thanks @thecountofzero. What you say is clear. Making my_plugin is less clear. Is a plugin the same thing as a controller? I am trying something like the following (just to test)

$.Controller('Map',
{
init: function(el){
el.css('border','solid 5px green');
console.log('map controller init');
},
test: function(){
console.log('test');
}
});
$("#test").map();

and I keep getting an error (callback is undefined). #test is hard-coded in the html...

theRegge

Re: Event when view rendered?

1 year ago

UPDATE: sorry to be so 'chatty'... I just tried something with success. With the same controller, but calling it differently:

instead of:

$("#test").map();

I did:

var mc = new Map($("#test"));

and no more error and the controller got initialized... jmvc's documentation seems to express that the two forms are identical, in the rapid start page:

$('#myTabsElement').tabs() // ==> new Tabs( $("#myTabsElement") )

Again, I am not getting everything. But if what I have works, I will work with it until my knowledge gets more advanced/subtle. Thanks for the help though, you put me on the right path...

thecounto..

Re: Event when view rendered?

1 year ago

Try this:

steal.plugins('jquery/controller')

.then(function($) {

$.Controller.extend('Map',
{},
{
      init: function() {
            this.element.css('border', 'solid 5px green');
            steal.dev.log('Map controller init');
      },

      test: function() {
            steal.dev.log('test');
      }
});

});

theRegge

Re: Event when view rendered?

1 year ago

I get exactly the same with your code.

$("#test").map(); // => Error: "Callback is undefined;

var mc = new Map($("#test")); // => Works, get the steal log in console.

theRegge

Re: Event when view rendered?

1 year ago

My biggest apologies. I had a typo in my code. it's working well now. Anyway, you had answered my question right away. As you said, the views are rendered synchronously, so I can render sub-views inside view elements. The different ways to call a controller on an element are another issue and I will look into it more later. Thanks a lot for your help and patience.