Very new to webdev here, but trying my hand at Meteor! I'd like to create a collection that contains some text, a link, and an image and show each item in the collection in a grid-type layout similar to Pinterest.
I have found some resources, such as Meteor-isotope (https://github.com/digioak/meteor-isotope), cast.js (http://blog.benmcmahen.com/post/45711238911/create-beautiful-grid-layouts-with-cast-js) and even maybe using twitter bootstrap's own grid system?
Is there a recommended approach to a gridview with Meteor? Thank you.
Masonry works nicely for me (here's my app). Simply add it to your project.
meteor add sjors:meteor-masonry
In order to make rendering work correctlly with images, you'll also need to add the imagesLoaded library.
meteor add mrt:jquery-imagesloaded
Here's an example on how to use it in your code:
result.html
<template name="resultPage">
<div id="result-container">
{{#each posts}}
{{> post}}
{{/each}}
</div>
</template>
<template name="post">
<div class="result-item">
<a href="{{url}}" target="_blank">
<img src="{{url}}">
</a>
<div class="author">
Submitted by: <strong>{{author}}</strong>
</div>
</div>
</template>
result.js
Template.resultPage.rendered = function() {
var $container = $('#result-container');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.result-item'
});
});
};
I found this sample project and ended up learning from it. I'm not sure if it helps others, but this is the project: http://isotest.meteor.com/
I went with isotope myself, but not the meteor package. I ended up having to use the library itself and then use jquery ImagesLoaded to do a isotope reLayout call. The way meteors Template..rendered works doesn't take into effect images or something so my "blocks" would intermittently overlap from time to time. I stopped developing the site but you can see how I went about it at www.mmohype.com. Click any game.
Related
I'm trying to add (Download on The App Store) buttons (for both the app store and google play) in my nopcommerce website footer.
Any idea on how I can get it done?
Like This One
I'm not sure if any plugin is available for your requirement. But I can give you a reference to modify your code.
Go to: Presentation > Nop.Web > Views > Shared > Components > Footer > Default.cshtml
After the div <div class="footer-block follow-us"> add your code:
<div class="footer-block information">
<div class="social">
<div class="title">
<strong>Download it from</strong>
</div>
<img src="https://play.google.com/intl/en_us/badges/images/generic/en_badge_web_generic.png" width="140" height="auto" />
</div>
</div>
It will display as below, also you can add for app store.
Perhaps, you can create a separate partial view and use here; that'd be the best practice instead displayed here.
Also, I'm not good in css, so didn't make much effort.
How to use parameter in handlebar partial I am using grunt-assemble and cant find anything in docs
For Example I will create a partial name heading and use it in my template
<h1 class="tac mt-80 underline">
{{heading}}
</h1>
<body>
{{> heading "Test"}}
</body>
unfortunately, thats not possible with grunt-assemble out of the box.
Their recommended way is to use the parseJSON helper for that:
{{#parseJSON '{"heading": "TEST"}'}}
{{> heading }}
{{/parseJSON}}
But you should take a look at the current implementation of assemble, which includes a updated version of Handlebars (which provides your wished functionality). It seems like they moved away from Grunt in favor of compatibility with Gulp.
Needless to say, my experience with Meteor is lacking. I come from a Rails background, where you can do a lot more logic (and magic) in your views than Meteor.
The situation: I've got some routes that look like /things/:_id, and I've named that route 'thing' because it shows only one thing of a user's many owned things:
FlowRouter.route('/things/:_id', {
name: 'thing',
action() {
BlazeLayout.render('appPage', {app: 'thing', sidebar: "thingsListOnThing", header: 'thingTitle'});
}
});
As you can see, I'm also loading a template I've built to list all of the user's owned things on the sidebar for easy navigation. That template, thingsListOnThing is the target of this question.
Get the gist? I'm able to mark the route that dislays a template with a complete list of a user's things as active using zimme:active-route like so:
// A list of all a user's things
<div class="{{isActiveRoute name='things' class='is-active'}}">
List of Things
</div>
This package is great, but it won't help me with routes that look like /things/:_id because, then every link to each individual thing would be is-active on any thing page, not just the one where the current path's :_id matches the _id of the active thing.
I'm really kind of stuck here. My first guess would be to use template helpers, but I'm confused as to where to get started with that.
If need be, please as me to upload any piece of my code you require. I figured it's such a generic question that you guys probably don't need to see all of my code to understand what I'm trying to accomplish.
Using: zimme:active-route
Template Helpers
Template.listOfThings.helpers({
activeListClass(page) {
const active = ActiveRoute.name('thing') && FlowRouter.getParam('_id') === this._id;
return active && 'active';
},
});
Template HTML:
<a class="{{isActivePath 'thing'}}" href="/things/{{_id}}">
<div class="thingListItem {{activeListClass page}}">
{{title}}
</div>
</a>
I've got a very simple template problem going on that appears to be similar to this guy's problem, though I've tried to build a simple example to demonstrate the problem and hopefully have someone explain to me how to fix or work around it.
Although as I'm doing some online research, it may be that the official documentation is out of date with the code. The reason I haven't bought into accepting that just yet is that the problem seems to have existed for a while, the dates on such articles in forums appears to be fairly old, and there's talk of it being fixed. There's also talk the feature is gone. What's the new way, if there is one?
I'm using Meteor 0.9.0.1 with iron:router 0.9.1. Specifically, I set up my project like this:
$ meteor create ironTest
$ cd ironTest
$ meteor add iron:router
$ meteor
Pointing my browser at http://localhost:3000/ as instructed, shows the default project. So far so good.
Now make ironTest.html contain this:
<body>
<h1>Before</h1>
{{renderRouter}}
<h2>Afterward</h2>
</body>
<template name="hello">
Hello Template
</template>
<template name="goodbye">
Goodbye Template
</template>
Make ironTest.js contain this:
Router.configure({
autoRender: true // we will experiment with this Boolean shortly
});
Router.map(function () {
this.route('hello');
this.route('goodbye');
});
If you go to the routes http://localhost:3000/hello and http://localhost:3000/goodbye, you'll see the templates correctly render as expected and documented, appended to the <body> element, so it appears after the <h2> element.
According to the current documentation for iron:router, one should be able to set the autoRender property to false, and the template should no longer be appended to the <body> element, but rather be injected where the Handlebars (okay, Spacebars) element {{renderRouter}} is, that is, between the <h1> and <h2> elements.
When I try this, visually it doesn't do anything. Opening a JavaScript Console to look at errors shows none. Although, by deliberately going to an invalid route it will show a missing template router exception, showing the routing code is indeed working.
Does anyone know how to coerce the code above into working?
For the curious, I've got a working simplistic equivalent that might be of use to others working this problem.
This new ironTest.html uses a template (for a layout) with no <body>:
<template name="main">
<h1>Before</h1>
{{> yield}}
<h2>Afterward</h2>
</template>
<template name="hello">
Hello Template
</template>
<template name="goodbye">
Goodbye Template
</template>
This ironTest.js instead uses a layout:
Router.configure({
layoutTemplate : 'main'
});
Router.map(function () {
this.route('hello');
this.route('goodbye');
});
It's worth an aside that this solution doesn't work for me, as I don't want a global layout, and have concern that riddling layouts in the route themselves is a tighter coupling than desired for my purposes.
I'm currently looking for a way to dump debugging log information from the Router as it performs transitions, but that's another story.
I'm trying to get the Gumby.js library to work with Meteor, but cant get it to work.
I've tried both installing it manually in /client/lib folder and using 'mrt add gumby'.
The CSS part seems to work pretty fine with the grid working perfectly, but the JS modules dont work.
I'm setting a responsive Navbar just like this
<template name="nav">
<div class="row navbar centered" id="nav1">
<!-- Toggle for mobile navigation, targeting the <ul> -->
<a id="nav-toggle" class="toggle" gumby-trigger="#nav-ul" href="#"><i class="icon-menu"></i></a>
<ul id="nav-ul" class="eight columns">
<li>Quienes somos</li>
<li>Marcas</li>
<li>Servicios</li>
<li>Laboratorios</li>
<li>Contacto</li>
<li>Otros</li>
</ul>
</div>
</template>
but the menu just does not popup on mobile width. And other modules like Folders and skip dont work at all when defined.
you can see a sample here
any idea on how to get it up and running?
Not sure about the real situation, because the js files are packed in the website and it's hard for me to tell from the source code. However, there is some clue you may find useful.
I assume you want to run the js script after the template is rendered. In this case, you need to write like this.
Template.nav.rendered = function() {
// Run the js to render the dropdown or whatever.
}
This is the Meteor programming paradigm. If you simply run the js files directly, the template may not be ready when you run that part of the code. The "rendered" callback is the place you need to place some actions after this template is ready.
In addition, you can refer the official document here http://docs.meteor.com/#template_rendered