Adding New Client Pages

There are several steps you must follow, to add a new client side page. Following are the steps, with examples. Remember, the client js is in /node/web/public/scripts, and the templates are in /node/web/views/templates.

1. Add a controller (make sure to return $this)

Hilary.scope('heinz').register({
    name: 'exampleController',
    dependencies: ['newGidgetModule', 'GidgetRoute', 'locale', 'viewEngine', 'MyModel'],
    factory: function ($this, GidgetRoute, locale, viewEngine, MyModel) {
        'use strict';

        $this.get['/myroute'] = new GidgetRoute({
            routeHandler: function (err, req) {

                // you may need to use AJAX to connect with the server here
                // check out the homeController search route for an example
                
                viewEngine.setVM({
                    // the id of your template goes here
                    template: 't-example',
                    // data from your model goes here
                    data: new MyModel(/*data from ajax might go here*/)
                });
            }
        });

        return $this;
    }
});

2. Add a model

Hilary.scope('heinz').register({
    name: 'MyModel',
    dependencies: [],
    factory: function () {
        'use strict';

        var MyModel;

        MyModel = function (myModel) {
            var self = {
                name: ko.observable(myModel.name || 'Enter a name'),
                description: ko.observable(myModel.description);
            };

            return self;
        };

        return MyModel;
    }
});

3. Register the controller in the composeRoutes function of our bootstrapper: /node/web/public/scripts/startup.js

gidgetApp.registerModule(scope.resolve('exampleController'));

4. Add a view to /node/web/views/templates

<!-- example.hbs -->
<script id="t-example" type="text/html">

    <div class="example-component" data-bind="with: data">
        <h1 data-bind="text: name"></h1>
        <div data-bind="text: description"></div>
    </div>

</script>

4. Register the partial in layout.hbs

{{> example}}

5. Add scripts for each of the js files you just created

<script src="/scripts/controllers/exampleController.js"></script>
<script src="/scripts/models/MyModel.js"></script>