Javascript MVC view issue

Question

using JMVC i have this issue: this line NOT work : this.element.append('hello');

here my controller:

steal('jquery/controller', 
    'jquery/dom/form_params',
    'jquery/view/ejs',
    'jquery/controller/view')
.then(
    './home.css',
    function($){
        $.Controller("Wg.Home",

        {
            defaults : {
                defaultText : "Search for things here"
            }
        },

        {


            init : function(){
                this.render();
            },

            render : function(){
                $("body").addClass("home");

                this.rendered = true;
                this.element.html(this.view(this.options));
            this.element.append("<div>Hi there</div>");
            }, ...

i need to manipulate the EJS html after view render but i can't. what i miss? Thanks

MORE INFO:

I run my controller from router.js in this way:

this.home = new Wg.Home(this.container);

this.container is :

this.container = $('#page');

and my init.ejs is:

<div class="form-container">
    <form action="" method="get" class="form-wrapper clearfix">

    <input type='text' placeholder="<%=defaultText%>" name='q' id="q" class='blurred'/>
    <button type="submit">Search</button>

    </form>
</div>

I have no error.

Juri · Accepted Answer · 2013-01-12T11:25:31.303

Based on the comments below I think to have understood your kind of issue. You're invoking the view in this way:

 this.element.html(this.view('init',{'artists' : Wg.Models.Artists.findAll()}));

You need to look at this statement ˋWg.Models.Artists.findAll()ˋ. This is nothing else than a wrapper around a jQuery ajax call which is asynchronous. JavaScriptMVC added support for directly handling async ajax calls in the ˋthis.viewˋ method which is done through jQuery Deferreds. That means when you invoke the above instruction, what happens is

an asynchronous call to the server starts (defined by ˋWg.Models.Artists.findAll()ˋ)
when the result returns, the view (is either taken from local cache or fetched) and rendered with the output.

The problem however is that ˋthis.element.append(...)' is done before the ajax call returns, basically your ˋinitˋ view is rendered after your ˋthis.element.append(...)ˋ happens.

What you could try is to do the following:

var self = this;
Wg.Models.Artists.findAll({}, function(data) {
    //this is the success callback when the data has been fetched
    self.element.html(this.view('init', { artists: data }));
    self.element.append('<div>hi there</div>');
});

Try if that works for you.

//Edit:

This article from the docs might be quite helpful:

http://javascriptmvc.com/docs.html#!view.deferreds

ok, u don't get any error, but could u provide some more info about what is the output? Is the EJS view being rendered?? — Juri, Jan 12 '13 at 11:12
In the real app i use model : this.element.html(this.view('init',{'artists' : Wg.Models.Artists.findAll()})); if i add setTimeOut( function(){ that.element.append('
Hi there
'); },2000) IT WORK! — Ste, Jan 12 '13 at 11:16
Nop. If u have time, take a look at how jQuery Deferreds work. They are really powerful in handling such async scenarios. — Juri, Jan 12 '13 at 11:31

Javascript MVC view issue

1 Answers1