Meteor, Come modifico un modello (vista) sull'evento?

Sto costruendo un app con due punti di vista: a casa & visualizzazione elencoMeteor, Come modifico un modello (vista) sull'evento?

Quando l'utente fa clic sul nome di una lista per la vista a casa, si dovrebbe passare alla "visualizzazione elenco" modello. Ho aggiunto una variabile di sessione chiamata 'vista', impostandola su 'casa' all'avvio. Quando viene rilevato un evento click su uno degli elementi (nome elenco) nella schermata iniziale, cambia il valore della visualizzazione in "viewList". Quindi in HTML, ho un'istruzione if per mostrare il modello di casa se 'view' è 'home', altrimenti mostra il template 'viewList'.

Posso dire che la prima parte funziona perché sto emettendo il valore di 'vista' e viene emesso il valore "viewList" quando si fa clic su un nome di lista, semplicemente non cambia il modello.

Cosa mi manca?

Il mio codice:

mylists.js:

Lists = new Mongo.Collection("lists"); 

if (Meteor.isClient) { 
    Meteor.startup(function() { 
    Session.set("view", "home"); 
    }); 

    Template.main.helpers({ 
    view: function() { 
     return Session.get("view"); 
    } 
    }); 

    Template.home.helpers({ 
    lists: function() { 
     return Lists.find({}, {sort: {lastUsed: -1}}); 
    } 
    }); 

    Template.home.events({ 
    "submit #new-list": function (event) { 
     var name = event.target.listName.value; 
     Lists.insert ({ 
     name: name, 
     createdAt: new Date(), 
     lastUsed: new Date() 
     }); 
    }, 
    "click .list-row": function (event) { 
     Session.set("view", "viewList"); 
    } 
    }); 
}

mylists.html:

<head> 
    <title>My Lists</title> 
</head> 

<body> 
    {{> main}} 
</body> 

<template name="main"> 
    {{view}} 
    {{#if view "home"}} 
     {{> home}} 
    {{else}} 
     {{> viewList}} 
    {{/if}} 
</template> 

<template name="home"> 
    <header> 
    <h2>My Lists</h2> 
    </header> 
    <ul id="lists"> 
     <li> 
      <form id="new-list"> 
       <input type="text" name="listName" value="My List 1"> 
       <input type="submit" value="Save"> 
      </form> 
     </li> 
     {{#each lists}} 
      {{> list}} 
     {{/each}} 
    </ul> 
</template> 

<template name="viewList"> 
    <header> 
    <h2>View List</h2> 
    </header> 
<!-- list details will show here --> 
</template> 

<template name="list"> 
    <li class="list-row" id="{{_id}}">{{name}}</li> 
</template>

fonte

2015-02-16 Josh

cosa vuoi cambiare? la strada? da casa> visualizza elenco? – Ethaan

Ho aggiornato la mia domanda dopo aver tentato di risolverlo usando una variabile Session, ma non ha funzionato. – Josh

controllare l'aggiornamento della risposta – Ethaan

Se si desidera cambiare da modelli vista che suggerisco tu installa il pacchetto iron:router.

corsa

meteor add iron:router

Lester creare il routes.js sulla cartella /lib

Ora lascia fare questo passo dopo passo.

Prima Crea 1 modello su myAppName/client/views/layout.html

<template name="layout"> 
    {{> yield}} 
</template>

e aggiornare i routes.js con questo codice.

Router.configure({ 
    layoutTemplate: 'layout' // here we say that layout template will be our main layout 
});

Ora sulla stessa route.js creare questo 2 percorsi.

Router.route('/home', function() { 
    this.render('home'); 
}); 

Router.route('/viewList', function() { 
    this.render('viewList'); 
    });

Con questo se si passa a localhost:3000/home o /viewList vedrete il contenuto HTML in là.

NOTE: <header> all'interno dei modelli non è necessario.

Ora questo è solo un esempio perché non so veramente quale sia la tua idea principale qui.

si sta chiamando {{#each lists}} all'interno del modello home, quindi qual è il punto di avere il modello viewList?

Ora se si desidera creare percorsi individuali e dinamici per ciascuna lista, è possibile provare questo.

Router.map(function() { 
    this.route('listViews', { 
    path: '/listViews/:_id', 
    waitOn: function(){ 
     return Meteor.subscribe('lists') 
    }, 
    data: function(){ 
     return Lists.findOne({_id: this.params._id}); 
    } 
    }); 
});

Ora, con questo, si hanno i modelli dinamici per ogni oggetto sulla raccolta List, se si va a localhost:300/listView/35dwq358ew ad esempio, si otterrà il rendering ListView con alcuni dati.

si può fare cose come questa all'interno della lista modello

<template name="list"> 
    <li class="list-row" id="{{_id}}">{{name}}</li> 
    <li><a href="/listViews/{{this._id}}">Check this List in detail</a></li> 
</template>

e il modello viewList sarà simile a questa.

<template name="viewList"> 
    <h2>{{title}}</h2> 
<!-- list details will show here --> 
    {{informationAboutList}} 
</template>

fonte

2015-02-16 07:11:20 Ethaan

Grazie per questo. Questo significa che è impossibile cambiare i template semplicemente usando un evento click? – Josh

Non capisco come questo cambi un modello. Inoltre, il tuo commento precedente era prezioso, stavo solo facendo una domanda. – Josh

Josh quel post? – Ethaan

Meteor, Come modifico un modello (vista) sull'evento?

risposta

Problemi correlati