Sub-instradamento in un sito SPA

2

Ho un sito SPA su cui sto lavorando, ho il requisito che tu possa avere subroutes per un modello di visualizzazione di pagina. Attualmente sto usando questo 'modello' per il sito

MyApp.FooViewModel = MyApp.define({
    meta: {
        query: MyApp.Core.Contracts.Queries.FooQuery,
        title: "Foo"
    },
    init: function (queryResult) {

    },
    prototype: {               
    }
});

Nel modello di vista principale ho una tabella di percorso

this.navigation(new MyApp.RoutesViewModel({
    Home: {
        model: MyApp.HomeViewModel,
        route: String.empty
    },
    Foo: {
        model: MyApp.FooViewModel
    }
}));

Il meta oggetto definisce quale query dovrebbe popolare il modello di vista di livello superiore quando è invocato tramite sammyjs, questo è tutto a posto ma non supporta il sottotitolaggio

Il mio piano è di cambiare il meta oggetto in modo che possa (offcourse opzionale) assomigliare a questo

meta: {
    query: MyApp.Core.Contracts.Queries.FooQuery,
    title: "Foo",
    route: {
        barId: MyApp.BarViewModel
    }
}

Quando sammyjs rileva un barId nella stringa di query, il Barmodel verrà eseguito e popolato attraverso il proprio meta oggetto.

È un buon design?

modifica: Hmm, ho appena notato che sopra la progettazione non è sempre sufficiente, il modello di visualizzazione genitore potrebbe dover eseguire qualche elaborazione quando i trigger subRoute, quindi ho aggiunto un oggetto alla definizione inviata in MyApp .define come

meta: {
    query: MyApp.Core.Contracts.Queries.FooQuery,
    title: "Foo",
    route: {
        barId: MyApp.BarViewModel
    }
},
onRoute: {
   barId: function(barViewModel) {
      //act on bar route
   }
}
    
posta Anders 24.10.2013 - 09:27
fonte

1 risposta

1

Non hai bisogno di un tuo ruolo, Angular combinato con ui-router è un ottimo framework SPA per quel genere di cose.

$stateProvider
  .state('home', {
      url: "/",
      templateUrl:'/home.html'
  })
  .state('foo', {
      url: "/foo",
      templateUrl:'/foo.html',
      resolve:{
         bar:  function(){
            return {'value': 'baz'};
         }
      },
      controller: ['$scope', 'bar', function($scope, bar) {
        $scope.bar = bar;  
      }]
  })
  .state('foo.bar', { //sub routing
      url: "/bar",  //actual /foo/bar
      templateUrl:'/bar.html',
      resolve:{
         baz:  function(){
            return {'value': 'buzz'};
         }
      },
      controller: ['$scope', 'baz', function($scope, baz) {
        //$scope.bar still = bar;  
        $scope.baz = baz;  
      }]
  })

;

Permette già una grande separazione delle preoccupazioni e ha un'iniezione di dipendenza integrata.

Vedi questo plunkr, per un esempio:

link

    
risposta data 24.06.2014 - 21:24
fonte

Leggi altre domande sui tag