All geek questions in one place

Meteor; How to change a template (view) for an event?

I create an application with two views: home and view list

When a user clicks on a list name in the home view, it must be changed to a "watch list" template. I added a session variable called "view", setting it to "home" at startup. When a click event is detected on one of the elements (list name) on the main screen, it changes the view value to "viewList". Then in HTML, I have an if statement to show the home template if "view" is "home", otherwise display the "viewList" template.

I can say that the first part works because I displayed the value "view" and it displays the value "viewList" when I click on the list name, it just does not change the template.

What am I missing?

My code is:

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>
+6
source share
1 answer

If you want to switch from viewing templates, I suggest you install the iron: router package.

run

 meteor add iron:router

lester create routes.js in the /lib folder

now does it step by step.

First create 1 template on myAppName/client/views/layout.html

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

and update route.js with this code.

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

Now on the same .js routes create these 2 routes.

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

In this case, if you go to localhost:3000/home or /viewList , you will see the contents of html there.

NOTES: <header> inside templates that you do not need.

Now this is just an example, because I really don't know what your main idea is.

you call {{#each lists}} inside the home template, so what's the point with the viewList template?

Now , if you want to create individual and dynamic routes for each list, you can try this.

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

Now you have dynamic templates for each object in the List collection, if you go to localhost:300/listView/35dwq358ew , for example, you get a listView visualization with some data.

you can do such things in the template list

 <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>

and the viewList template will look like this.

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

Source: https://habr.com/ru/post/982543/

More articles:


All Articles