I have this main layout
<!-- Wrapper-->
<div id="wrapper">
{{#if currentUser }}
<!-- Page wrapper -->
{{> topNavbar }}
<!-- Navigation -->
{{> navigation }}
<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg">
<!-- Main view -->
{{> yield}}
</div>
<!-- End page wrapper-->
<!--{{> rightSidebar }}-->
{{else}}
{{> loginPage }}
{{/if}}
</div>
<!-- End wrapper-->
With the obvious purpose of displaying the login page if users are not logged-in. An unintended effect is when users navigate between certain pages/routes it can occasionally show the loginpage for a half second or two.
I am sure there is a way to do this with subscriptions, but just haven't gotten their in Meteor yet... was wondering if one of the ninjas out there that will look at this and scoff can pass a quick hint.
Thanks!
I have seen How to get rid of Meteor template flickers but I am hoping that there is a way to solve this without routing -- can I add the code to the main templates javascript file?
The problem is, there are not two states of logged in and not. There is also the in between state where the client is logging in. To account for that, there is a {{loggingIn}} helper which you could use as:
<!-- Wrapper-->
<div id="wrapper">
{{#if currentUser }}
<!-- Page wrapper -->
{{> topNavbar }}
<!-- Navigation -->
{{> navigation }}
<!-- Page wraper -->
<div id="page-wrapper" class="gray-bg">
<!-- Main view -->
{{> yield}}
</div>
<!-- End page wrapper-->
<!--{{> rightSidebar }}-->
{{else}}
{{#if loggingIn}}
loading...
{{else}}
{{> loginPage }}
{{/if}}
{{/if}}
</div>
<!-- End wrapper-->
Also on an unrelated note, you can use
{{!-- Spacebars comments do not get into the DOM --}}
instead of
<!-- This still gets into the DOM, but not rendered by the browser -->
Related
I use Ghost 3.0.2
I would like to limit first page (index.hbs) to display only posts with some tags.
I tryed without luck:
{{#foreach posts}}
{{#has tag="es"}}
{{> post}}
{{/has}}
{{/foreach}}
Current code is:
<!-- start content area -->
<div class="main-content-area">
<div class="container post-listing">
{{> loop}}
</div>
</div>
I would like to get rid of two lines in the html used in a vue 2.x application. The lines with <template scope="props"> and the corresponding </template> should not be necessary.
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<p>{{ message }}</p>
<my-component>
<template scope="props">
<p>{{props.test}}</p>
</template>
</my-component>
</div>
I would rather define my own component attribute to define the scope name
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<p>{{ message }}</p>
<my-component with="props">
<p>{{props.test}}</p>
</my-component>
</div>
So instead of exposing the writer of the HTML to the concepts of templates and scopes we would do that inside my-component.
Does anybody know whether the vue templating mechanism is open for extension inside components like this ?
The benefit of having component is that it can be re-used at multiple places. so idea is to define template at one place and you can use it at multiple places.
the example you have written, you will be able to re-use it at again. template of component is generally not defined inside component, it will be separate and than that component can be used at multiple places.
See one sample below:
<div id="app">
<template id="item-edit">
<li>
<span v-show="!inEdit">{{item.name}}</span>
<input v-show="inEdit" type="text" v-model="item.name" />
{{inEdit ? 'save' : 'edit'}}
</li>
</template>
<ul>
<item-edit v-for="item in items" :item="item"></item-edit>
</ul>
</div>
Complete fiddle: http://jsfiddle.net/corh2tqo/
I'm having trouble understanding why AutoForm is not working 100% here. The client-side validation works but submitting the form is not calling the meteor method insertQuestion.
As soon as I replace the contents of the modal template with the modalQuestion template it works and the meteor method is called. So my best guess here is that it has got something to do with {{> Template.dynamic }} include but haven't been able to solve this problem myself.
Can anyone tell me why the dynamic template include is not playing nice here?
layout.html
<template name="layout">
{{> modal}}
</template>
layout.js
Session.set('modalData', {template: "modalQuestion", title: "Test"});
modal.js
Template.modalBlock.onRendered(function () {
this.autorun(function() {
if (Session.get('modalData')) {
$('#modal').modal();
}
});
});
modal.html
<!-- A template to include in index.html that dynamically renders the a modal template -->
<template name="modal">
{{#if modalData}}
{{> Template.dynamic template=modalData.template data=modalData}}
{{/if}}
</template>
<!-- A generic block to be used by our modals -->
<template name="modalBlock">
<div id="modal">
<header>{{title}}</header>
{{> Template.contentBlock }}
</div>
</template>
<!-- A specific modal template -->
<template name="modalQuestion">
{{#modalBlock title=title}}
{{ #autoForm schema=SchemasQuestion meteormethod="insertQuestion" type="method" id="insertQuestionForm" class="form" }}
{{> afQuickField name="text" label=false placeholder="schemaLabel" }}
<button type="submit" class="button">Submit</button>
{{ /autoForm }}
{{/modalBlock}}
</template>
I have several templates:
<template name='mamals'>
<div id={{id}} class="mamals-container">
{{> UI.contentBlock}}
</div>
</template>
<template name='dog'>
{{#mamals}}
<div class="dog">
<p>I'm a dog</p>
</div>
{{#mamals}}
</template>
<template name='cat'>
{{#mamals}}
<div class="cat">
<p>I'm a cat</p>
</div>
{{#mamals}}
</template>
<template name='pig'>
{{#mamals}}
<div class="pig">
<p>I'm a pig</p>
</div>
{{#mamals}}
</template>
so in the main page I have a where user can drag and drop as many animal as they want into the farm. What I need to accomplish is every time a user drag an animal I would like to render that template and add it to farm (NO replacing, just add it). How may I implement this???
thanks in advance!
with Blaze you can render any template dynamically using JS http://docs.meteor.com/#/full/blaze_render
In my meteor.js application, some pages have side menu, some pages do not have. This is my layout.html
<template name="layout">
<div class="container">
{{> header}}
<div id="main" class="col-md-3">
{{> yield region="sidenavigation"}}
</div>
<div id="main" class="col-md-9">
{{> yield}}
</div>
</div>
</template>
Let's say I have x template which has side menu, and y template which does not have side menu. When I render x template, everything is good. But when I render y template, because it does not have side menu, the content is pushed to the right expectedly. How can I solve this? Thank you.
Use {{#contentFor region=''}} in the template or page that you want to show the side menu in
eg.
<template name="yourtemplatename">
{{#contentFor region="sidenavigation"}}
..
...
....
{{/contentFor}}
</template>
example https://github.com/EventedMind/meteor-building-an-application-with-meteor-and-iron-router