22 votes

suggéré bootstrap/standard de l'échantillon pour la colonne vertébrale.Marionnette application

Est-il recommandé de bootstrap standard pour la construction de la colonne vertébrale.marionnette basé sur require.js?

Peut quelqu'un de partager leur expérience avec d'amorçage grande échelle de la colonne vertébrale.marionnette application?

38voto

danikoren Points 1367

Je vais essayer de répondre à ma propre question avec l'espoir qu'il peut aider certaines personnes.

Veuillez noter que je ne suis pas à l'exportation, et je suis sûr que ce n'est pas parfait, je pense que c'est adapté à mes besoins.

N'hésitez pas à commenter et suggérer des modifications et des améliorations, de sorte que dans le temps il deviendra un bon point de départ solide pour les gens qui expérimentent avec non trivial de marionnettes de projets.

App de la structure:

même que layoutManager trouvé ici

résumé de le suivre peut être trouvé ici ici

Pour info trouvé cette épine Dorsale.La marionnette.Réutilisable

config.js fichier:

// Use ECMAScript 5 Strict Mode
"use strict";

// Define jQuery as AMD module
define.amd.jQuery = true;

// Set the require.js configuration for your application.
require.config({

  // Initialize the application with the main application file
  deps: ["main"],

  paths: {

    libs: "../assets/js/libs",
    plugins: "../assets/js/plugins",

    // Libraries
    jquery: "../assets/js/libs/jquery",
    underscore: "../assets/js/libs/lodash",
    backbone: "../assets/js/libs/backbone",
    marionette: "../assets/js/libs/backbone.marionette",
    handlebars: "../assets/js/libs/handlebars",

    //plugins
    text : "../assets/js/plugins/text",
    i18n : "../assets/js/plugins/i18n",
    cookie: '../assets/js/plugins/jquery.cookie',

    //general
    UserSession: "../assets/js/libs/userSession",
  },

  config: {
        //Set the config for the i18n
        //module ID
        i18n: {
            locale: 'fr-fr'
        }
    },

  shim: {

     marionette: {
      deps: ['backbone'],
      exports: 'Backbone.Marionette'
    },

    backbone: {
      deps: ["underscore", "jquery"],
      exports: "Backbone"
    },

    handlebars: {
      deps: [],
      exports: "Handlebars"
    }

  }
});

main.js fichier:

    define([
    "jquery", 
    "app", 
    "router",
    'userSession'
],
function ($, App, router,userSession) {

  "use strict";

  $(function() {

    App.Router = router; 
    App.start();


   // if(userSession.authenticated())
       //alert("us");


  });

});

router.js fichier:

    define([

   "backbone",
   "marionette",
   "controller",   
],
function (Backbone, Marionette, controller){

    "use strict";

    var AppRouter = Backbone.Marionette.AppRouter.extend({

        appRoutes: {

            "path1" : "goto_path1",
            "path2" : "goto_path2",
            "path3" : "goto_path3"
        }

    });

    return new AppRouter({controller: controller});

});

controller.js fichier:

    define([
  'jquery',
  'underscore',
  'backbone',
  'marionette',
  'app',
  'userSession'
], 
function($, _, Backbone, Marionette, App, userSession) {

    return {

        goto_path1: function () {

            this.isAuthenticated();
            require(['modules/files/files_for_modul1'], function(someview){

                var currentView = new someview.Views.main();
                App.main.currentView.content.show(currentView);          
          })
        },

         goto_path2:  function () {

            this.isAuthenticated();
            require(['modules/files/files_for_modul2'], function(someOtherview){

                var currentView = new someOtherview.Views.main();
                App.main.currentView.content.show(currentView);    
            })
        },
        isAuthenticated: function() {

          if(!userSession.authenticated()){
               App.Router.navigate('login', {trigger: true});
           }
        }

    }   

});

app.js fichier:

    define([

  'jquery',
  'underscore',
  'backbone',
  'marionette', 
  'handlebars',
  'text!templates/app_view.html',

  'modules/mainMenuView/mainMenuView',
  'modules/dashboard/dashboard',
],
function ($, _, Backbone, Marionette, Handlebars, tmpl, mainMenuView, dashboard ) {


    Backbone.Marionette.TemplateCache.prototype.compileTemplate = function(rawTemplate) {

        return Handlebars.compile(rawTemplate);
    };

    var App = new Backbone.Marionette.Application();

    App.addRegions({

         main: '#main'
    });

    App.addInitializer(function() {

       this.initAppLayout();   
    });

    App.on("initialize:after", function(){

      Backbone.history.start({ pushState: true });
    });

    App.initAppLayout = function() {

        AppLayout = Backbone.Marionette.Layout.extend({

         template: tmpl,

         regions: {
             userInfo: "#userInfo",
             mainMenu: "#mainMenu",
             content: "#content"
         },

        });

        var layout = new AppLayout();
        App.main.show(layout);

        App.main.currentView.mainMenu.show(new mainMenuView.Views.menu());
        App.main.currentView.content.show(new dashboard.Views.main());    

       // this can be a main menu navigation
       // this will change content at the "main" app screen
       // your links should include the role=nav-main-app

        $('a[role=nav-main-app]').click(function(e) {
          App.Router.navigate( $(this).attr('href'), {trigger: true});
          e.preventDefault(); 
        });  

    };

    return App;

});

userSession.js fichier:

    define([
     'jquery',
     'underscore',
      'backbone',
      'cookie'
    ],
function($, _, Backbone, cookie){

    var UserSession = Backbone.Model.extend({

        defaults: {

            'accessToken': null,
            'userId': null
        },

        initialize: function(){

            this.load();
        },

        authenticated: function(){

            return Boolean(this.get('accessToken'));
        },

        save: function(authHash){

            $.cookie('userId', authHash.id);
            $.cookie('accessToken', authHash.accessToken);
        },

        load: function(){

            this.userId = $.cookie('userId');
            this.accessToken = $.cookie('accessToken');
        }
    })

    return new UserSession();

});

3voto

Melanie Points 51

Je suis nouveau à cela, mais je suis en utilisant Yeoman (yeoman.io) avec cette marionnette générateur: https://github.com/mrichard/generator-marionette pour une application que je suis en construction pour le moment.

Yeoman + le générateur fondamentalement construit le fichier échafaudage pour vous, la rédaction d'un ensemble de beaucoup de code réutilisable, vous avez juste besoin d'aller dans le modèle, la vue, le modèle, etc des fichiers et de donner les modèles de leurs attributs personnalisés et les points de vue des instructions pour ce faire onRender et ainsi de suite.

J'ai trouvé un excellent moyen pour obtenir amorcée avec require.js et j'ai appris beaucoup de choses sur la structuration d'une application à partir de l'utilisation de ces outils.

Espérons que cette aide.

1voto

Tanzeeb Khalili Points 4996

Vous pouvez essayer de Kraken.
Ce n'est pas une véritable application, et il utilise des pignons au lieu de RequireJS, mais c'est un début.

1voto

Bernardo Points 522

J'aime votre base de mise en oeuvre dans l'ensemble, mais à mon humble avis c'est l'ouverture d'une énorme dépendance de lapin-trou. Le contrôleur doit avoir une connaissance très précise de la vue-modèle de modules et les différents App mises en page.

À mon humble avis, cette ligne de code pauses encapsulation plutôt mal:

var currentView = new someview.Views.main();
App.main.currentView.content.show(currentView);

Je suppose que c'est ~ok~ si nous voyons les contrôleurs sont non réutilisables morceaux de code, qui sont très spécifiques à l'application et à chaque affichage-module de modèle.

EDIT: Penser, il n'est PAS correct, même si nous n'avons pas de plan sur la réutilisation de ce code. Dans une très large application de ce code qui va nous mordre dans le cul - de toute modification de l'APPLICATION module va nécessiter d'importantes modifications à l'ensemble de tous les contrôleurs. L'entretien de l'enfer.

Mais j'ai élargi mon contrôleurs d'agir en tant que médiateurs, ainsi, et pour traiter les cas de distribution entre les différents points de vue partie d'un module (par exemple, la distribution des événements entre une MapView et de ses correspondants SearchResultsView, mais pas avec les autres SearchResultsView sur la page). En tant que tel, mon contrôleurs/médiateurs sont conçus de façon modulaire, et je voudrais être en mesure d'éliminer la dépendance à l'égard de l'Application/Mise en forme de l'objet ensemble. Mais, comment?

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X