2013-07-21 17 views
5

Ho un'app KO e ognuna delle mie pagine ha un modello di vista separato che gestisce tutte le azioni richieste su quella pagina (caricamento, aggiunta, modifica, eliminazione, ecc.). Sono riuscito a suddividere il codice in più moduli utilizzando RequireJS, ma non riesco a trovare un modo per far funzionare contemporaneamente più modelli di visualizzazione utilizzando Sammy.Knockout, Require, Sammy e un modello di visualizzazione per ogni pagina: come faccio a farlo funzionare?

Questa è la configurazione che ho nel mio file init.js al momento, che carica il contenuto sulla prima pagina. E funziona:

require(['jquery', 'ko', 'sammy', 'viewmodels/page1'], function($, ko, sammy, page1) { 
    var page1VM = new page1.ViewModel(); 
    ko.applyBindings(page1VM); 

    var app = sammy('#wrapper', function() { 
    this.get('#page1', function() { 
     page1VM.loadContent(); 
    }); 

    this.get('#page2', function() { 
     // do nothing yet 
    }); 

    [...] 

    this.get('#pageX', function() { 
     // do nothing yet 
    }); 
    }); 

    app.run('#page1'); 
}); 

Come posso associare i miei altri modelli di vista alle altre pagine?

Ho anche provato ad aggiungere uno ko.applyBindings separato per ogni pagina all'interno di this.get, che ha generato un errore quando sono tornato a una pagina che aveva già applicato tali associazioni.

+3

Potreste essere interessati a Durandal, che è un framework che fondamentalmente riunisce tutte queste cose insieme per voi. – Tyrsius

risposta

2

http://jsfiddle.net/PgLgz/4/

Va bene sono tornato in violino e pulire tutto il codice per mostrare in modo efficace ciò che volevo dire con la mia risposta -

function myViewModel() { 
    var self = this; 
    self.message = "hey"; 
    self.page1VM = new page1VM(); 
    self.page2VM = new page2VM(); 
    var app = sammy('#wrapper', function() { 
     this.get('#page1', function() { 
      page1VM .loadContent(); 
     }); 
    }); 
}; 

ko.applyBindings(new myViewModel()); 

Ricorda però che nel violino non posso davvero utilizza Sammy.js (non sto cambiando le viste o navigando) e non c'è praticamente alcun motivo per usare Require.js dato che è solo un esempio, e ho inserito tutti i modelli di visualizzazione nello stesso file JS.

Poiché si utilizza Sammy e Require è necessario prendere questo codice e applicarlo funzionalmente al proprio sito o inserire un bit più grande di codice da qualche parte.

+0

Sembra non funzionare senza applyBindings. Forse sto facendo qualcosa di sbagliato. Ecco il modello di visualizzazione pagina1: http://snippi.com/s/jwcf5zb – Norbert

+0

Sì, è ancora necessario applicare i binding Aggiungerò la risposta per includere che –

+0

Viene generato un errore "oggetto non è una funzione" per la riga applyBindings. – Norbert

Problemi correlati