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)

// route with `before` and `after` pipelines, using GidgetRoute
$this.get['/gidget/example'] = new GidgetRoute({
    routeHandler: function () {

        // 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-empty',
            // data from your model goes here (i.e. `new MyModel()`)
            data: {
                heading: locale.pages.home.empty.heading,
                body: 'Route: "/gidget/example"'
            },
            after: function (vm) {
                console.log('view model:', vm);
            }
        });
    },
    before: function (err, req) {
        console.log('before example 1 route:', req);
    },
    after: function (err, req) {
        console.log('after example 1 route:', req);
    }
});

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>