Question

I apologize if this has a painfully obvious answer but I am both a JS and Ember noob and I am having trouble finding a solution to what I think is a common scenario. Essentially, I have a multi-page app with html/css/js front end and a java back end with an exposed REST api. I have 1 app.js file that I include in all screens and multiple controllers, some of which only apply to individual screens.

EDIT: Forgot my question. My question is how do I delay the query to my server for my user data until my controller has an observer. Since the controller is present on multiple screens (which dont all need it) I do not want to blindly query on creation of the object since it would be wasteful. For now i have a hacky way of doing it where at the end of my inline script tag of a page I call the populate method. Below is what my code currently looks like.

Section of app.js:

App = Ember.Application.create();

User = Ember.Object.extend({
    username: 'empty',
    fullname: 'empty user'
});

App.UserDataSource = Ember.Object.extend({

    fetchMyUser: function(callback) {
        $.get('ncaa/user', function(data) {
          callback(User.create({
                  username: data.username, 
                  fullname: data.fullname}));
        });
    }
});

App.userDataSource = App.UserDataSource.create();

App.UserController = Ember.Object.extend({

    content: null,

    populate: function() {
        var controller = this;
        this.get('dataSource').fetchMyUser(function(data) {
             controller.set('content', data);
        });
    }
});

App.userController = App.UserController.create({
     dataSourceBinding: Ember.Binding.oneWay('App.userDataSource')
});

Ember.run.sync();

Section of index.html

<script type="text/x-handlebars">
      Welcome, {{App.userController.content.fullname}}
</script>

....other code....
<script type="text/javascript">

     $(document).ready(function() {
           ....other code....
           App.userController.populate();
     });
</script>

I am pretty sure my first steps will be modifying that handlebars template to extend Ember.View but would like to know what the community believes is the best practice. Also, is it wrong for me to try and put all of this in one app.js file? It would be ok to query on creation of my controller if it was only imported on screens that required the user to display.

Answer 1

The answer for my question did end up being in the Ember.View. Essentially what I do is override the init function of my view which adds the call to populate the necessary controller with data. The view is that instantiated via the handlebars template so no more unnecessary calls or hacky work around. Important changes below.

Index.html:

<script type="text/x-handlebars">
    {{#view App.UserNameView }} 
        Welcome, {{fullName}}
    {{/view}}
</script>

App.js:

App.UserNameView = Em.View.extend({
    init: function() {
          this._super();
          App.userController.populate();
    },
    fullNameBinding: 'App.userController.content.fullname',
    userNameBinding: 'App.userController.content.username'
});