Return resolved data models in view callback

[basememara]

It would make sense to add the resolved data models in the callback of the view like this:

 can.view('todos/todos.ejs', { 
    todos: Todo.findAll(), 
    user: User.findOne( { id: 5 } ) 
}).then(function(frag, data){ 
    me.element.html(frag); 
    //myFunction(data.todo); 
});

The data parameter does not exist in the API like above, but it would open doors if it could. Passing the data in the callback on line 361 of view.js did not work. Please see this forum thread for more details: https://forum.javascriptmvc.com/topic/get-model-in-view-callback-28-11-2012

[rjgotten]

👍
This would really help with a few of my use cases, where I have additional post-rendering logic that depends on values from the model.

[justinbmeyer]

This doesn't really seem needed. You can easily use $.when and get the data and use it to render.

Sent from my iPhone

On Nov 29, 2012, at 1:52 PM, Basem Emara notifications@github.com wrote:

It would make sense to add the resolved data models in the callback of the view like this:

can.view('todos/todos.ejs', {
todos: Todo.findAll(),
user: User.findOne( { id: 5 } )
}).then(function(frag, data){
me.element.html(frag);
//myFunction(data.todo);
});

The data parameter does not exist in the API like above, but it would open doors if it could. Passing the data in the callback on line 361 of view.js did not work. Please see this forum thread for more details: https://forum.javascriptmvc.com/topic/get-model-in-view-callback-28-11-2012

—
Reply to this email directly or view it on GitHub.

[daffl]

I don't know, this:

var todosDfd = Todo.findAll(),
    userDfd = User.findOne( { id: 5 } ),
    viewDfd = can.view('todos/todos.ejs', { 
        todos: todoDfd, 
        user: userDfd 
    }).then(function(frag, data){ 
        me.element.html(frag); 
        //myFunction(data.todo); 
    });

can.when (todosDfd, userDfd, viewDfd).then(function(todos, user, frag) {
    // To stuff here
});

is a pretty awkward contraption compared to

can.view('todos/todos.ejs', { 
    todos: Todo.findAll(), 
    user: User.findOne( { id: 5 } ) 
}).then(function(frag, data){ 
    me.element.html(frag); 
    //myFunction(data.todo); 
});

And all it takes to make that possible is to add the data as the second parameter when resolving the deferred.

[justinbmeyer]

I would think maybe:

$.when( 
  Todo.findAll(), 
   User.findOne({id: 5})
  can.view.get('todos/todos.ejs') )
  .then(function(todos, user, renderer) {
  el.html( renderer( {todos: todos, user: user} )
  // myFunction(todos, user)
})

[daffl]

Doesn't that defeat the purpose of being able to pass Deferreds when rendering a view? I do like the way Can handles Deferreds in an unobtrusive way and you don't have to worry about control flow (can.when, dfd.done, dfd.fail etc.) when there is no need to.

And the only thing it took to allow accessing the resolved data was changing deferred.resolve(result); to deferred.resolve(result, data);.

The other changes were actually fixing an issue because can.view modified the original data:

var viewData = {
    todos : Todo.findAll()
};

can.view('view.ejs', viewData).done(function(frag) {
    viewData.todos // -> resolved data
});

viewData.todos // -> can.Deferred

I'm pretty sure that the original object shouldn't just change at some point in time (without even having a way of finding out when and how).

[maurerbot]

I saw this being resolved in 1.1.3 but when I tried updating my code by removing the model callback, "data" is not returned and is undefined. I am wondering if the original suggestion is what was actually implemented or the above comment from @daffl would be the proper way? It is a nice suggestion since the code looks nicer as well without the model callback.

...
can.view('js/view/lineup.ejs', {
    stories:  StoryModel.findAll( {section: section.name}, function (resp) {
        console.log('resp', resp);
        //the resp is a dependent for a story lookup. Update the sections observeable to fire the call for a lineup story
        $APP.CURRENT_SECTIONS.attr(section.name, resp); 
    }),
    lineup: section.name
} ).then(function (frag, data) {
    console.log('data', data); //<- undefined
    $('#section'+k).append(frag);
});
...

[basememara]

I can confirm there is a problem with this too and the data indeed comes back undefined. Stepping thru the code shows that the correct data values does get passed back to the callback function, but I think jQuery deferred functions take over and the data is no longer in scope by the time it gets back to you?

Thanks for the discussion on this. This addition does make code flow much more smoother.

[daffl]

This is the test used for implementing the feature:

https://github.com/bitovi/canjs/blob/master/view/view_test.js#L192

If you can provide a breaking test we can try and figure out why it isn't working.

[maurerbot]

So the problem occurs only when you don't use the render method.

Does not work.

can.view('js/view/lineup.ejs', { ...

Does work.

can.view.render('js/view/lineup.ejs', { ...

[basememara]

I just saw the same thing: http://jsfiddle.net/basememara/j9XSw/6/

[rjgotten]

So the problem occurs only when you don't use the render method.

And no wonder: can.view internally wraps the result value from can.view.render with a piped Deferred that only preserves the first parameter. It discards any others.

See: https://github.com/bitovi/canjs/blob/f120881f312ecd854de36a89a83e9b7de7ed8c33/view/view.js#L13-L40

[daffl]

True indeed. Unfortunately you can't just pipe deferreds that resolve with more than one argument.

Anyway, can somebody please create a new issue for this (making the resolved data available when using can.view)?