New to marionette, router and controller config

问题:

I have been looking at the various marionette questions and not found what i'm after and was hoping someone could give me some sound advice and a couple pointers. I am new to this and just looking to build on the boilerplate starter pack i selected on github

https://github.com/coombsj/RequireJS-BackboneJs-MarionetteJS-Bootstrap_Starter

I would like to establish two things;

1. how to create routes & contoller config for the afor referenced project - please see examples explained below.??
2. using the same referenced project how do i include or use jquery within a template page, anything such as page document ready so show an alert box??

It has a navigation structure in it and a couple regions defined which i get but other than the LandingView.html the navigation doesn't load any pages in contentRegion.

This appears to be down to now template pages created (handlebars), i'm ok with them but struggling to create the routes and controller section correctly.

at the moment, the Router.js looks like this

define(['marionette', 'app/Controller'],
    function (marionette, Controller) {
        'use strict';

        return marionette.AppRouter.extend({
            appRoutes: {
                'test'      : 'testView',
                '*action'   : 'logAction'
            },
            controller: Controller
        });
    });

and the Controller.js

define(['app/views/LandingView'],
    function (LandingView) {
        "use strict";

        return {
            logAction: function (action) {
                console.log(action);
                S2C.content.show(new LandingView());
            }
        };
    });

define(['app/views/testView'],
    function (testView) {
        "use strict";

        return {
            testView: function (test) {
                console.log(action);
                S2C.content.show(new testView());
            }
        };
    });

the LandingPage loads ok

LandingView.js

define(['marionette', 'tpl!app/views/_templates/LandingView.html'],
    function (Marionette, template) {
        "use strict";

        return Marionette.ItemView.extend({
            template: template()

        });
    });

LandingView.html

<div style="background-color:#6CF">
<h2>
    This is the home page
</h2>
</div>

my testView does not load

testView.js

define(['marionette', 'tpl!app/views/_templates/testView.html'],
    function (Marionette, template) {
        "use strict";

        return Marionette.ItemView.extend({
            template: template()
        });

    });

testView.html

<form class="form-inline" id="testForm" method="post" action="#">
    <div>
        <input type="text" name="name" accesskey="s" size="30"
               value=""/>
        <input type="submit" value="Find"/>
    </div>
</form>

Thanks in advance for any help. Mike

回答1:

Here are a few resources to start you on your Marionette journey:

• routing is discussed in the free sample to my book on Marionette: http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf
• Brian Mann covers displaying dialog boxes in a free screencast here: http://www.backbonerails.com/screencasts/building-dialogs-with-custom-regions
• Derick Bailey discusses dialog management in a blog post here: http://lostechies.com/derickbailey/2012/04/17/managing-a-modal-dialog-with-backbone-and-marionette/

These should set you on the right path.

More info:

• you don't use templates to do things, you'd use views or controllers, depending on context. For example, in a view, you could declare a handler within the event object that will launch an alert (or run some jQuery code) see for example https://github.com/davidsulc/marionette-gentle-introduction/commit/d63ccd041aba74e972c0fa93264c45c47e6f2e6e
• you can also have (e.g.) javascript libraries executed within view when they are rendered: https://github.com/davidsulc/marionette-gentle-introduction/commit/2f80a63fa79d4779e82b16845ec8f0871e5797c7 (see file assets/js/common/views.js)
• routers and controllers are big subject, and they are explained in depth within the linked sample

What exactly are you having trouble with?

回答2:

many thanks for the help and pointers, since being diagnosed with Parkinsons some things don't come quite as easy as they used to and learning curves seem a little steeper but i would like to convert one of my existing query / js based sites to a more grounded and easier to maintain & scale base and have decided that i think this is the right approach to at least try proof of concept.

To answer your question i am simply trying to use a decent boilerplate example which comprises of backbone, require, jquery & bootstrap. The difficulty is i don't necessarily know a good from bad starting point, i have now purchased your book and a couple other to give me a little light reading or at least provide a reference point.

I have chosen a starting point from github which ticked the box of requirements but as mentioned unsure about the good bad or ugly so would like to try follow it through to at least understand how to extend the supplied Router & Controller js files - which i understand are kinda key to this and need to really delve into.

The example https://github.com/coombsj/RequireJS-BackboneJs-MarionetteJS-Bootstrap_Starter only loads one page from the navigation links in the example although even though there are 3 links in it the navigation links.

Using this project i would like the other links to load additional pages into the referenced content region and be able to execute javascript when the page has loaded.

I hope that makes sense and once again many thanks.