Design layout meteor reinforced concrete

We have implemented a layout where the main content is in the dynamic sidebars. We defined the following layoutTemplate :

 <template name="layout"> {{> content}} {{> leftbar}} {{> rightbar}} <nav class="navigation"> {{#if currentUser}} {{> navigation_logged_in}} {{else}} {{> navigation_logged_out}} {{/if}} </nav> </template> 

We include, for example, the template of the right template in the layout template.

 <template name="rightbar"> <aside class="rightbar"> <button id="closeRightBar" class="close-cross"></button> {{yield 'rightbar'}} </aside> </template> 

The right-bar template includes the value of the rightbar, where we provide specific content.

We have implemented the following RouteController:

 UserShowRouter = RouteController.extend({ before: function() { var username = this.params.username; if(App.subs.user) { App.subs.user.stop(); } App.subs.user = Meteor.subscribe('user', username); }, waitOn: function () { return Meteor.subscribe('user'); }, data: function() { return Meteor.users.findOne({'profile.username': this.params.username}); }, action: function() { this.render('profile', {to: 'rightbar'}); } }); 

What we wanted to achieve is that, for example, the profile template is entered in the rightbar income and is updated and re-displayed when the data changes.

The problem is that the sidebars are dynamically animated, shown, and hidden. Now every time the profile template gets re-rendered , the layout template gets re-rendered . Why is this? We thought that one of the goals of profitability regions is that the entire site does not need to be reprocessed. Now that the layout gets re-rendered, all css animations are back to their original values.

Now we have tried several different approaches, but none of them seems to be a good and clean solution. Is there a way to keep the layout template from being re-rendered and just keep the yield area and the template date? Any suggestions or alternatives would be highly appreciated.

+6
source share
2 answers

As I understand it, the behavior in which the re-rendering of your templates β€œbubbles up” and causes the re-rendering of their parent templates is not a feature for the iron router or the way your code is implemented, but Spark is inherent. The Iron-router {{yield}} construct does not change this behavior, as far as I can tell from its documentation.

The good news is that Spark is set up for immediate replacement with a new, more subtle rendering engine, now codenamed "Spacebars", which should alleviate the problem.

Here's a preview of the new rendering system:

https://github.com/meteor/meteor/wiki/New-Template-Engine-Preview

This conversation from a week ago also perfectly describes the benefits that come through the new rendering engine (although it’s quite long, the review is given in the first 5 minutes):

https://www.youtube.com/watch?v=aPf0LMQHIqk

As for your options today, you can:

a) Use the {{#constant}} and {{#isolate}} options to try to limit re-rendering.

b) Work with the development branch as described in the link above:

You can play with the current version of work in progress code using the release tag of the template-engine-preview-4 (run the application using meteor -release template-engine-preview-4) or by checking (this is the internal code name).

c) Best of all, if the time frame of your project allows you to allow re-rendering until Meteor 1.0 succeeds and the Spaces are not on the main branch - it seems like 1-3 months.

+3
source

I think the reason your layout template gets rendered is because a reactive data source is used for the data hook you are using. If the current user object changes, the router probably decides to re-register the entire page, because there is no easy way to determine which parts exactly depend on your reactive data.

If I'm right, a simple solution to your problem is to create a user helper that will retrieve the necessary data only where it is really needed, for example.

 Template.profile.user = function () { return Meteor.users.findOne({/*...*/}); } 

Then you can use it in your profile template with the with (sic!) Helper, i.e.

 {{#with user}} ... {{/with}} 

to prevent multiple calls to the Template.profile.user function.

Also, if I were you, I would use the data binding only for the data that the templates require in my layout.

+1
source

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


All Articles