meteor,iron-router,famo.us , Fullpage Transitions with meteorJS, iron:router and famo.us


Fullpage Transitions with meteorJS, iron:router and famo.us

Question:

Tag: meteor,iron-router,famo.us

I´m playing with meteor, iron router and famo.us (mjn:famous integration for meteor)and was wondering how is the common way to create full page transitions with famous surfaces without writing the same code again when I add more views. Does someone have an easy to understand code example for me to create simple transitions like fade from View A -> View B? I also use gadicohen:famous-views.

I´m also confused which famous integration I should use. there is mjn:famous and raix:famono available for meteorJS


Answer:

RenderController accepts some reactive data. Lets say that we have something

{{#RenderController}}
  {{#if somethingTrue}}
     {{>template1}}
  {{else}}
     {{>template2}}
  {{/if}}
{{/RenderController}}

So when the somethingTrue changes reactively RenderController re-renders the page. Same thing comes to Iron router. Coz of Iron router {{>yield}} is reactive, pages are reactively changed with animations.

Very un-complete project.. but you can see codes & github Famome


Related:


Using a helper with arguments AS a helper argument in Spacebars


meteor,spacebars
So I am trying use a helper as an argument of another helper in Spacebars. In the example below, 'getResultInfo' is a helper that gets data specific to the arguments passed, and 'formatResult' is a helper that formats its result and the results of other helpers. <template name="example"> {{#each collectionResults}}...

Cannot connect to MongoDB inside a template


meteor
I'm still a newbie when it comes to Meteor. The following code works, I get the list: <body> <ul> <li>Test</li> {{#each members}} {{> MembersList}} {{/each}} </ul> </body> <template name="MembersList"> <li>{{name}}</li> </template> To use iron:router in need to put this in another page with {{yield}}, so I need to put it...

How can I assign data context in onCreated


javascript,meteor
How can I assign data context in onCreated (replace the whole context)? Following does not work: Template.mine.onCreated(function() { this.data = function() { return "MyData"; } }) While following does: Template.mine.onCreated(function() { this.data.myData = function() { return "MyData"; } }) I would like to replace the whole context. Is this possible?...

Meteor router and url paramaters


javascript,meteor,iron-router
I'm having some trouble trying to use the URL parameters in meteor with iron:router. On the home page if my app, I display a thread of posts. But I want to allow people to select a single thread by specifying its ID in the url. Like that, when someone click...

Access binaries inside docker


ubuntu,meteor,docker
I am using Meteor and Meteur Up package to push a bundle to server. It uses docker. The problem is that I cannot access graphicsmagick or imagemagick from inside a docker to use it in my app. However it is installed on the server and I can access it when...

how i add collaborators side-view in atmosphere?


meteor
i saw collaborators side-view in some (mrt, tmeasday) atmosphere organisation, is there any way to add like view in other organisations in atmosphere or is it exclusive for them ? ...

Convert ng-click to Blaze in meteoric


angularjs,meteor,ionic-framework,meteor-blaze,meteoric
I used ng-click as below in ionic: <div class="list"> <a class="item item-icon-right nav-clear" href="#/app/list1" ng-click="closeMenu()"> <i class="icon ion-ios7-paper"></i> Item 1 </a> .... </div> know I want to use Meteor with Meteoric. I don't know how to convert ng-click to Blaze version. Please guide me. I didn't find anything about this...

Meteor.users.find() - how to filter by group in alanning:roles package


meteor,mongodb-query,roles,groups
I'm trying to make an admin section on my website. The admin can go to the admin page and see a table of the users in his group. I only want to publish a the users that are in that admin's group. E.g. he is in the group ['soccer'] but...

Meteor: Load scss files in a certain order


meteor,sass
I'd like to know how to load scss files in order when using Meteor. Not using Meteor, I would make something like application.scss and load .scss files in order so that stylesheets loaded later can depend on mixins/variables loaded earlier. And then I'd load application.scss in my template. application.scss @import...

Using Meteor.call inside a server router


meteor
Router.route('/sms/inbound', function () { if (something) { Meteor.call("addUser", { name: "hello", age: 20 }) } }, {where: 'server'}); I want to do something like above. However, since Meteor.call is used on the client to make calls to server-side functions, it doesn't seem right to me. In collections you usually define...

Meteor: Passing Session values from client to server


javascript,node.js,session,meteor
I am using the following code on the client side to set the Session variable: Template.download.events({ 'click button': function() { var clientid=Random.id(); UserSession.set("songsearcher", clientid); console.log(clientid + UserSession.get("songsearcher")); I am using the following pacakge: Meteor-User-session, which will explain the use of UserSession in place of Session. Now, this works fine. But...

Meteor/MongoDB limiting the result


mongodb,meteor
I am trying to find all documents and publish at most 5 from the results. Following this section of the MongoDB doc, I am trying to do this: Meteor.publish('teams', function () { return Teams.find().limit(5); }); Yet, in the server console, I get an exception: Exception from sub teams id Pm6jKL8Sv3FSDSTfM...

Insert data in collection at Meteor's startup


javascript,json,meteor,data,startup
I would like to insert data at Meteor's startup. (And after from a JSON file) At startup, I create a new account and I would like to insert data and link it to this account once this one created. This is the code that creates the new account at startup:...

Meteor: onRendered doesn't get fired again after second render iron-route


javascript,meteor,iron-router
I have an iron-router route: Router.route('/profiel/bewerken', { subscriptions: function () { return Meteor.subscribe('currentUser'); }, action: function () { if (this.ready()) this.render('profielBewerken', { to: 'container', data: function () { return Meteor.user(); } }); else this.render('profielBewerken', { to: 'container', data: { loading: true } }); } }); It waits until the subscription...

MeteorJS Blaze.getData() occasionally returns undefined


meteor,meteor-blaze
I'm currently rendering bootstrap modals on my webpage using MeteorJS's "renderWithData" method to load each template when it's needed. I'm running into an issue where my helper methods which access the data in the modal using "Blaze.getData()" will occasionally return undefined and I'm unsure how to fix that. The only...

Meteor - Requests randomly failing


meteor,request-cancelling
I have this weird problem where some requests fails randomly. I have no idea what is causing this behavior. Sometimes it is images not loading and sometimes it is ajax request (cfs/severtime or algolia-search) and some other times everything is fine. It also happen in local and online. Here are...

How do I make a slight modification to a package locally in Meteor?


javascript,meteor
I'm using a package that loads Font Awesome from a CDN. However, the CDN used is pretty terrible, often stalling or timing out, so I'd like to switch it out. The source code is incredibly simple, and looking through it I found this: style.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'; Switching to a different...

Creating meteor autoform w/ array of radio buttons


meteor,meteor-autoform
I'd like to build an autoform in meteor that presents user with a twelve radio buttons and records an entry for each of the 12 buttons. I can get the form working easily enough if I create 12 different buttons—see below, but I'm wondering if it is possible to create...

Turning the Stripe Checkout into a Synch function


meteor,stripe-payments
I am trying to use wrapAsync for Stripe.charges call using Stripe Checkout, but I cant seem to get it working Client code Template.bookingPost2.events({ "click #accept": function(event, template){ event.preventDefault(); StripeCheckout.open({ key: 'public_key', amount: 5000, // this is equivalent to $50 name: 'Meteor Tutorial', description: 'On how to use Stripe ($50.00)', panelLabel:...

Disabling tail.sh for specific server ( or environment )?


javascript,meteor
While testing my meteor app i keep receiving emails saying my application went offline. How does i disable this feature for an specific environment or hostname ( for instance, "localhost" ) ?...

Use JSON file to insert data in database


javascript,json,mongodb,meteor,data
I'm using my JSON file like this to insert data in my collection : var content = JSON.parse(Assets.getText('test.json')); console.log('inserting...'); Profiles.insert({ user: id, data:content }; But I would like to have a "data's tree" like that : [ user: "rtegert23423131", firstname:"test", surname:"test2", // ... ] Not like that : [ user:...

Use a “months” array to perform calculations for each month in a for loop


javascript,arrays,meteor,meteor-helper
I have a mongo collection to store "projects", each document stores a project with different calculations for each month of the year a_jan : 10, a_feb : 20, a_mar : 25, a_apr : 70 ... b_jan : 30, b_feb : 10, b_mar : 20, b_apr : 70 ... c_jan :...

Meteor - Multiple data contexts with Iron Router


meteor,iron-router
I just started using Meteor and Iron Router. Here I'm trying to use two data contexts but appearantly I'm doing it wrong. I've googled it but it doesn't seem this is a very common problem, but I guess it got to be possible to pass on two or more data...

Meteor collections: how to connect to different collections referring to each other?


meteor,meteor-helper,meteor-collections
I have two collections: Contracts = new Mongo.Collection('contracts'); Reminders = new Mongo.Collection('reminders'); These are structured in the database more or less like this: Contracts: { "id": "4432234", "contract": "C-42432432", "description": "Description of contract", "counterpart": "Company name", "status": "awarded" }, etc. Reminders: { "name": "Contract expiring", "type": "expiring", "contract": "C-42432432", "reminderDate":...

Meteor Iron Router resubscribe on Rights change with meteor-roles


meteor,iron-router
I am writing a meteor application with a user-role-system (alanning:roles) My Roles are group based. When a user knows my group url, it is allowed to access the group an get the role "defaultUser" in this group. localUser is allowed to subscribe to all the local stuff of a group....

Meteor - Query Embedded Documents


javascript,mongodb,meteor
I would like to fetch only specific fields in embedded documents of my collection. One Document of my Collection: "_id" : "fDa9J245hkKnZyipM", "OrderID" : "qPypJCWov79dQ2nc2", "MWLink" : { "LinkType" : "KRF - PPUI - LOO", "LinkID" : "test3", "SiteA" : "placeA", "SiteB" : "placeB" } My helper: linkID: function() {...

CKeditor outputs Html. How to format it for displaying properly, not just lame html?


javascript,html,css,meteor,ckeditor
I am using CKeditor, and this is my code: ...othercode.. <div class="input-field col s12"> <textarea id="textarea1" class="materialize-textarea"></textarea> <label for="textarea1">Body of the Post</label> </div> <input type="submit" name="Submit" id="sub"> </form> </div> </div> </div> {{else}} <div>You are not logged in.</div> {{/if}} <script> CKEDITOR.replace('textarea1'); </script> In Javascript, I use the same id to extract...

Filtering records according to dropdownlist


meteor,meteor-helper
I need to filter the listing or records according to selection in dropdownlists. I have three dropdowns that needs to filter the records reactively in collaboration with each other. i.e value selection in one dropdownlist should filter the records effected by other dropdownlist values. var filterAndLimitResults = function (cursor) {...

Passing a parameter into Meteor Template Helper


meteor,spacebars
I am trying to pass a parameter to a template helper. The parameter seems to be passed but then I can't use it as I would like to. I pass the parameter like this: {{#if unitFieldExists 'profile'}} {{profile}} {{/}} Helper in /client/lib/helpers.js Template.registerHelper('unitFieldExists', function(unitField) { var doc = Units.findOne({_id: this._id...

Get json values from key-value pair without passing keys in meteor


javascript,json,mongodb,meteor
i am using keys to get the values from json in meteor. My json is in this format. { "_id" : "SXTJBs7QLXoyMFGpK", "Brand" : { "value" : "Nike" }, "Material" : { "value" : "Cooton" }, "Price" : { "value" : "67484" }, "ComboId" : { "value" : "y23" },...

What is cursor?


meteor
In discover meteor, posts: function() { return Posts.find(); } is used, not this: posts: function() { return Posts.find().fetch(); } I tried function below, it also works, and can realtime update. What is cursor exactly? And What is the different of above two functions?...

Meteor: group documents and publish an object


javascript,meteor
I would like to know how to group documents according to a condition, and publish to the client. Suppose I have the following documents: [ { name: 'John', createdAt: some_date_value_1 }, { name: 'Jane', createdAt: some_date_value_2 }, { name: 'Bob', createdAt: some_date_value_1 }, { name: 'Jenny', createdAt: some_date_value_2 } ]...

Pass router parameters in Router.go()


meteor,iron-router
I have a route to display user parameters: admin/users/details/:userID In the template associated with this route I have "Back" button. What is the best way to pass "return route path" to Router.go() and access it later in Template.AdminUsersDetailsDetailsForm.events({ "click #form-back-button": function(e, t) { e.preventDefault(); Router.go(PARAM.NAME, {}); } ...

Router path for page navigation


meteor,iron-router
we have the problem with the router when we navigate from one to another page. Suppose when we are in template1 and we need to go to templete2.Then we do Router.go(/templete2) right.I need in the URl templete1/templete2.Please help me....

Meteor file upload with Meteor-CollectionFS giving error method not found


meteor
I am using following meteor package to upload the image https://github.com/CollectionFS/Meteor-CollectionFS Code I am using Uploads =new FS.Collection('uploads',{ stores: [new FS.Store.FileSystem('uploads',{path:'~/projectUploads'})] }); if (Meteor.isClient) { Template.makedobox3.events({ 'change .fileinput':function(event,template){ FS.Utility.eachFile(event,function(file){ var fileObj=new FS.File(file); Uploads.insert(fileObj,function(err){ console.log(err); }); }) } }); } I am getting error when I try to upload a file...

How do I do an analog of a page scope in variable in Meteor?


meteor,meteor-helper
I have this Meteor layout: <template name="layout"> {{> toolbar }} <div class="container"> {{> yield}} </div> </template> Router.configure({ layoutTemplate: 'layout' }); I want to have the toolbar argument display dynamic content based on the page. I could do that by using some reactive variables. However, what happens when more than one...

TypeError: Cannot read property 'slice' of null


meteor,meteor-autoform,meteoric
I am using autoform in my project and getting this error when I open the form Not sure if this is because of any versions or dependency, my autoform is not working and I am getting this error, I have the screenshot and the schema code, form code below, template...

XMLHttpRequest to Restivus API


javascript,meteor,xmlhttprequest,cross-domain,cors
I have got a problem when sending a cross domain XMLHttpRequest to a Restivus API. Here my code for the client side script: var xhrurl = 'http://example.com:3000/api/test'; var xhr = createCORSRequest('POST', xhrurl); xhr.withCredentials = true; xhr.setRequestHeader("Content-type","application/json"); xhr.setRequestHeader("X-User-Id",object.apiUser); xhr.setRequestHeader("X-Auth-Token",object.apiKey); xhr.send(); Here the function createCORSRequest function createCORSRequest(method, url) { var xhr =...

Meteor Iron Router not loading template


javascript,meteor,iron-router
I am trying to load templates using iron router and none of the templates for the routes load. The url will change when the items are clicked but the current page never changes. Lib/router.js - Router.configure({ // we use the appBody template to define the layout for the entire app...

Testing Meteor packages with Velocity?


meteor,jasmine,meteor-velocity
Velocity is an amazing testing framework for Meteor and I am currently using it to test my application code. Now I added a local package to the app, but I don't know how (or if) I can test the package with Velocity, too. I would like to drop tinyTest in...

DB relationship: implementing a conversation


mongodb,meteor
I want to implement a simple conversation feature, where each conversation has a set of messages between two users. My question is, if I have a reference from a message to a conversation, whether I should have a reference the other way as well. Right now, each message has conversationId....

How to return value in Meteor.JS from HTTP.call “GET”


javascript,ajax,http,meteor,facebook-javascript-sdk
I'm writing a meteor method, which should return a Facebook response for HTTP.call on graph api, but HTTP.call has only a callback function to show error/response, so I can't take this data outside, and Method can not return any value. Here's my method code: loadUserFBEvents: function () { var accessToken...

jQuery component stop working when routing


meteor
I'm using Bootstrap Select in Meteor (using this package if relevant: https://github.com/amrali/bootstrap-select-meteor), but everytime I switch page and go back (IronRouter) the select has reverted to a standard HTML select. I initialize it in the rendered callback but it's only called once and breaks when navigating: Template.temp.rendered = function() {...