No such template: Surface on 0.9.0 Release

[Wenape]

There seems to be a problem between famous-components and the latest official release of Meteor. It seems as if Blaze recognizes the inclusion tags of views as trying to include a template, instead of a ceratain type of view which references a template.

[gadicc]

Hey, thanks for reporting but I can't reproduce this. I created a new app according to the Quick Start instructions, copy and pasted the famousInit example template, and it all worked fine.

Generally we only see the error above if you try use a View before we're completely initialized. You should only use a view in the famousInit template, or in any iron-router template (since iron-router also adds them after full init).

Can you show me the full template that uses the Surface and also when it gets added to the document?

[Wenape]

This is working now. I tried using mj-famous and it works with no problems. Before 0.9.0 I always used famono, but for some reason I couldn't get to work this time with famono or famous-compiled. I'm using iron-router to route templates. (Using a main layout template to yield different routes that include famous views)

[gadicc]

Great, happy to hear you're up!

Was this your problem with famono? https://github.com/raix/Meteor-famono/issues/69#issuecomment-53540855

I'll admit I haven't tested with famous-compiled on 0.9.0. mj-famous requires you to specify the exact version when you add it, since 0.9.0 doesn't suggest dashed versions by default. I guess you figured that out already but for the benefit of others who arrive here :)

[Wenape]

I'm able to run my project using famono (0.7.2) without getting any incompatible architecture errors at startup.

This problem appears on the browser console, when a famous view is trying to render.

[gadicc]

Ah ok, I hear you. It was tested on an earlier rc and was all working, unfortunately I can't test on the final 0.9.0 because of the incompatible architecture error :( Working with raix to try resolve it and then I'll report back.

[swennemans]

Just started trying to port an app using famous-views, I think I encounter the same problem. My goal is to use transistions using iron-router and {{#RenderController}}. I'm using Meteor 0.9 and followed instructions as on: http://famous-views.meteor.com/start

[gadicc]

Hi guys, sorry, I'm confirming the issue, but I haven't worked out exactly why it's happening yet. For some reason on 0.9.0 package load process is different for a local package vs remote package. The quick workaround for now is to either use mj-famous or to install the package as a local package:

mkdir packages         # if it doesn't exist
git clone https://github.com/gadicc/meteor-famous-views.git packages/famous-components
meteor add famous-components

I'll update more once I know more.

[gadicc]

Oh, I guess I should update that we figured out the problem and I've submitted a PR to famono for this :) https://github.com/raix/Meteor-famono/pull/74

[adamgins]

HI, I seem to be getting a similar problem.

I am using " Meteor 0.9.2.1" with https://atmospherejs.com/mjnetworks/mj-famous as famono is not working with this version yet (I think).

I am trying to use GridLayout by including some simple example to get started:

 {{#GridLayout target="content" dimensions="[3,1]" size="[undefined,100]"}}
            {{#Surface size="[undefined,undefined]" class="well"}}col1{{/Surface}}
            {{#Surface size="[undefined,undefined]" class="well"}}col2{{/Surface}}
            {{#Surface size="[undefined,undefined]" class="well"}}col3{{/Surface}}
        {{/GridLayout}}

I get the following error:

debug:  [famous-views]  New HeaderFooterLayout (#1), content from inline block (parent: Template.layout) console.coffee:18
 debug:  [famous-views]  New Surface (#2), content from inline block (parent: Template.topNav) console.coffee:18
 debug:  [famous-views]  New Surface (#3), content from inline block (parent: Template.topNav) console.coffee:18
 debug:  [famous-views]  New Surface (#4), content from inline block (parent: Template.topNav) console.coffee:18
 debug:  [famous-views]  New Scrollview (#5), content from inline block (parent: Template.resourceList) console.coffee:18
 debug:  [famous-views]  New Surface (#6), content from inline block (parent: Famous.Scrollview, template: Template.resourceList) console.coffee:18
Exception from Tracker recompute function: Error: No such template: GridLayout
    at http://buzzydev.ddns.net:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:2658:15
    at null.<anonymous> (http://buzzydev.ddns.net:3000/packages/spacebars.js?fa6d15347dd76a8b1464ca3a0d4605598857db91:69:23)
    at http://buzzydev.ddns.net:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:1787:16
    at Object.Blaze._withCurrentView (http://buzzydev.ddns.net:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:2017:12)
    at viewAutorun (http://buzzydev.ddns.net:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:1786:18)
    at Tracker.Computation._compute (http://buzzydev.ddns.net:3000/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:288:36)
    at new Tracker.Computation (http://buzzydev.ddns.net:3000/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:206:10)
    at Object.Tracker.autorun (http://buzzydev.ddns.net:3000/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:476:11)
    at Blaze.View.autorun (http://buzzydev.ddns.net:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:1785:19)
    at null.<anonymous> (http://buzzydev.ddns.net:3000/packages/spacebars.js?fa6d15347dd76a8b1464ca3a0d4605598857db91:68:10) debug.js:41

I tried adding the following to my app.js:

FView.registerView('GridLayout', require("famous/core/GridLayout"));

I got an error:

Uncaught ReferenceError: require is not defined 

I added "meteorhacks:npm"

But no luck.

BTW, other templates like ScrollView or HeaderFooterLayout seem to work fine.

[adamgins]

@gadicc Hi there, just wondering if any help on this one, pls? I tried with both:

mjn:famous              0.3.0-2  Famo.us integration in meteor

and

mjnetworks:famous       0.2.2  Famo.us

I still get:

Exception from Tracker recompute function: Error: No such template: GridLayout
    at http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:2658:15
    at null.<anonymous> (http://localhost:3000/packages/spacebars.js?fa6d15347dd76a8b1464ca3a0d4605598857db91:69:23)
    at http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:1787:16
    at Object.Blaze._withCurrentView (http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:2017:12)
    at viewAutorun (http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:1786:18)
    at Tracker.Computation._compute (http://localhost:3000/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:288:36)
    at new Tracker.Computation (http://localhost:3000/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:206:10)
    at Object.Tracker.autorun (http://localhost:3000/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:476:11)
    at Blaze.View.autorun (http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:1785:19)
    at null.<anonymous> (http://localhost:3000/packages/spacebars.js?fa6d15347dd76a8b1464ca3a0d4605598857db91:68:10) 

[gadicc]

@adamgins, sorry, I missed your original message somehow. This is a different issue. What about with FView.registerView('GridLayout', famous.core.GridLayout); ?

I acknowledge I need to make it clearer what we provide out the box and what has to be registered by hand (the issue of course is whatever we register for you, will be sent to the client with famono, even if you don't use it). I've been thinking of a way to improve this, but haven't had a chance to implement it yet.

Apologies again for the long delay... I try to avoid 5 days with no response :( Even though I'm currently travelling now with limited internet access.

[adamgins]

Thanks @gadicc

Where do I include the code?

I just put it into the client and I get the following error:

 " debug:  [famous-views]  New GridLayout (#5), content from inline block (parent: Template.resourcePageView) console.coffee:18
Exception from Tracker recompute function: undefined is not a function
TypeError: undefined is not a function
    at famousCreated (http://localhost:3000/packages/gadicohen_famous-views.js?3c6ae19a31299104eb1a278e846d67a4623dff49:669:12)
    at null.<anonymous> (http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:2801:20)
    at fireCallbacks (http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:1814:16)
    at Object.Tracker.nonreactive (http://localhost:3000/packages/tracker.js?192a05cc46b867dadbe8bf90dd961f6f8fd1574f:502:12)
    at http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:1811:13
    at Object.Blaze._withCurrentView (http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:2017:12)
    at Object.Blaze._fireCallbacks (http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:1810:9)
    at Object.Blaze._createView (http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:1828:9)
    at Object.Blaze._materializeView (http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:1832:9)
    at Blaze._DOMMaterializer.def.visitObject (http://localhost:3000/packages/blaze.js?5ec4e54b22ab2196bcc772669c0619f71666393e:1508:28) 

[adamgins]

Actually got it to work - thanks, I added to one of my templates:

FView.ready(function(require) {
    FView.registerView('GridLayout', famous.views.GridLayout);
})

[gadicc]

@adamgins, glad you got this working! This will be made clearer in the future, waiting for the new version of famono before I can do any work on it though.

[ghost]

Hi there,

I ran into the same error and just wanted to catch up on what solution is the official for Meteor 1.0 now?

(android:http://meteor.local/packages/blaze.js:2775) Uncaught Error: No such template: Surface

As for others above I am using Surfaces in iron-router, that is inside of <template> tags, only. Initializiation is same as in your example:

if (Meteor.isCordova) {

//within the demo app, but famous-components will use this global too
  if (Package['famous-compiled']) {
    // @famono ignore
    famous = {
      core: Famous.Core,
      events: Famous.Events,
      inputs: Famous.Inputs,
      math: Famous.Math,
      modifiers: Famous.Modifiers,
      physics: Famous.Physics,
      surfaces: Famous.Surfaces,
      transitions: Famous.Transitions,
      utilities: Famous.Utilities,
      views: Famous.Views,
      widgets: Famous.Widgets
    }
  }

// famous globals for APP code
  Transform = null;
  FView.ready(function (require) {
    Transform = famous.core.Transform;

    // Famono: load famo.us shims and CSS
    famous.polyfills;
    famous.core.famous;  // CSS

    FView.registerView('GridLayout', famous.views.GridLayout);
  });
}

Here the template code:

<template name="mainLayoutCordova">
    <!--[if lt IE 9]>
    <p class="browser-warning"><strong><i class="icon-exclamation-sign"></i> Warning</strong> - You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/" target="_blank">upgrade your browser</a> to properly view this website.</p>
  <![endif]-->

    {{>Surface template='menuButton' size="[70,70]" origin="[1.0,0]" align="[1.0,0]" translate="[-15, 15,50]" }}

    {{#GridLayout dimensions="[4,1]" size="[undefined,70]" origin="[0,1.0]" align="[0,1.0]" translate="[0,0,50]" }}
        {{>Surface template='testButton'}}
        {{#Surface class="yellow-bg brd"}}col2{{/Surface}}
        {{#Surface class="yellow-bg brd"}}col3{{/Surface}}
        {{#Surface class="yellow-bg brd"}}col4{{/Surface}}
    {{/GridLayout}}

    {{>yield}}

</template>

[ghost]

Hi again,

sorry, tried it with _mjn:famous(0.3.05) and {{famousContext}}. Still the same error:

 (android:http://meteor.local/packages/blaze.js:2775) Uncaught Error: No such template: Surface
I20141202-14:34:58.848(1) (android:http://meteor.local/packages/gadicohen_famous-views.js:402) Uncaught TypeError: Cannot read property 'children' of null

[PEM--]

Wow, luck of the beginner, I guess. I've tried to create a Cordova app when seing your issue. Man, it is incredibly easy with Meteor. I almost don't believe it. Last time, I've created a Cordova app, it has costed me 2 hours of setup.

OK, as mentioned, I'm really far from being an expert in this field. First time doesn't mean every time. But here is what I did:

meteor create blur
cd blur
meteor remove *
mkdir client
meteor add coffeescript gadicohen:famous-views mquandalle:jade pierreeric:cssc pierreeric:cssc-colors pierreeric:cssc-famous pierreeric:cssc-normalize raix:famono
meteor remove autopublish insecure

Here is the content of my code (very basic a button blurred when touched, nothing fancy): lib/smart.require

{
    "famous": {
        "git": "https://github.com/Famous/famous.git",
        "root": "src"
    },
    "famous.polyfills": {
        "git": "https://github.com/Famous/polyfills.git"
    }
}

main.jade

head
  title Blur demo
  meta(charset='utf-8')
  meta(name='viewport', content='width=device-width, maximum-scale=1, user-scalable=no')
  meta(name='apple-mobile-web-app-capable', content='yes')
  meta(name='apple-mobile-web-app-status-bar-style', content='black')
  meta(name='mobile-web-app-capable', content='yes')

body
  +famousContext id='mainCtx'
    +blurred

template(name='blurred')
  +StateModifier align='[.5, .5]' origin='[.5, .5]'
    +Surface id='surf' size='[200, 200]' class='red-bg'
      | Touch me

main.coffee

css = new CSSC
css.add '.red-bg',
  borderRadius: CSSC.px 10
  backgroundColor: CSSC.red
  textAlign: 'center'
  lineHeight: CSSC.px 200
  fontWeight: 'bold'
  color: CSSC.white
  fontSize: CSSC.px 22
  cursor: 'default'
  # Prevent user's selection of the button
  userSelect: 'none'
  mozUserSelect: 'none'
  webkitUserSelect: 'none'
  webkitTouchCallout: 'none'

Engine = famous.core.Engine
SnapTransition = famous.transitions.SnapTransition
Transitionable = famous.transitions.Transitionable
Transitionable.registerMethod 'snap', SnapTransition

transitionable = null
final_pos = null
blurred = false
surface = null
snap =
  method: 'snap'
  period: 400
  dampingRatio: .7

blur_from_to = (i, f, transition) ->
  initial_pos = i
  final_pos = f
  transitionable = new Transitionable initial_pos
  transitionable.set final_pos, transition
  Engine.on 'prerender', prerender

prerender = ->
  current_pos = transitionable.get()
  blur_string = "blur(#{CSSC.px current_pos})"
  surface.setProperties webkitFilter: blur_string
  if current_pos is final_pos
    Engine.removeListener 'prerender', prerender

Template.blurred.rendered = ->
  surface = (FView.byId 'surf').surface
  surface.on 'touch', ->
    [start, end] = if blurred then [0, 10] else [10, 0]
    blur_from_to start, end, snap
    blurred = not blurred
  surface.setContent 'Good?'

And for adding Cordova:

meteor install-sdk android
meteor add-platform android
meteor run android

There is an issue on the handling of click/touch events but famous-views started nicely and I was able to check hot code reload.

[PEM--]

My understanding is that you should only put code in Meteor.isCordova uniquely in case of specific behavior that requires interaction with the jsBridge (the part of Cordova that exposes native API in your Cordova plugins).

Like I said, first time success doesn't make me an expert. But as you can see it, without trying enforcements of famo.us loading, the Surface (who is declared and exposed in client space by famous-views) worked out the box.

[PEM--]

Oops, my bad. The event function should be something like this:

count = 0
Template.blurred.rendered = ->
  surface = (FView.byId 'surf').surface
  surface.on 'touchstart', ->
    [start, end] = if blurred then [0, 10] else [10, 0]
    blur_from_to start, end, snap
    blurred = not blurred
    surface.setContent "Count #{count++}"

I've added a little counter because... Android's WebView is unable to handle CSS filters :disappointed:

[PEM--]

@der-ede Is that good for you?

[ghost]

Well, @PEM-- that is exactly what I am trying to figure out, or evaluate if you like. Is Meteor just good for some fast easy examples or can you really use it for 50k+ line of code projects? Right now it seems to me, that it is - well - like a Meteor! Fast, and when it hits the earth - chaos :) The problem is the order in which the files are loaded. Others put everything into packages for that reason. Also it takes forever to recompile 'meteor run android' if one changed a package etc. Despite of that I think it is a really cool project and appreciate people contributing to it. I just have deadlines, that's all.

And besides that, looking at your blog seems to me you are an expert.

I thought stuff should be put into Meteor.isCordova brackets whenever you want that code to only be executed in Cordova, isServer and isClient respectively.

But thx anyway.

[ghost]

Update: ok, seems having the right order of packages in .meteor/packages

...
mjn:famous
gadicohen:famous-views
iron:router
...

solved part of the problem for me. Now the Surface is recognized, only the GridLayout leads to Uncaught Error: No such template: GridLayout, which basically means that the html-file is loaded before the js-file with the registerView-statement. Putting it into a Template.mainLayoutCordova.rendered function doesn't solve the issue.

[PEM--]

Happy that you make it, at least for the Surface. For the GridLayout registration, something like this should be enough:

// Optional if you put your code in the client directory
if (Meteor.isClient) {
  Transform = null;
  // This is used to export this variable in the global space of your app
  GridLayout = null;
  // Note that here, the "require" is not needed
  FView.ready(function() {
    Transform = famous.core.Transform;
    // Now that famous-views is ready, famous.us is ready too, thanks to your package sorting
    GridLayout = famous.views.GridLayout;
    // Famono: load famo.us shims and CSS
    famous.polyfills;
    famous.core.famous;  // CSS
    FView.registerView('GridLayout', GridLayout);
  });

Please remove the part where you attempt to recreate famo.us structure of namespace. mjn:famono does it for you :wink:

[ghost]

Hi @PEM--, that's pretty much the same as my source code, despite that I am running on Cordova, so Meteor.isCordova. As far as I am informed you do not need to initialize a variable equal null in order to make it global in JS. As long as you don't put a var in front, it is global namespace. But that is exactly the same code as what I pasted above. Yeah, the

if (Package['famous-compiled']) {
    // @famono ignore
    famous = {
      core: Famous.Core, ...

part, that is not important, as only for the package famous-compiled.

Thank you, but I really think that the problem is the order of loading of packages and templates respectively. But I will try it out anyway -> Tried it, no difference with your snippet, still Surface:yes, GridLayout: no.

[ghost]

Hi @PEM--, I tried your example from above and it works, only I don't do Jade. Does your example also work with a GridLayout?

[PEM--]

Works like a charm. Here is the modified extract:

...
body
  +famousContext id='mainCtx'
    +gridusers
...
template(name='gridusers')
  +GridLayout size='[undefined, undefined]' dimensions='[1, 3]'
    +famousEach users
      +user

template(name='user')
  +Surface size='[undefined, true]'
    p #{name} - #{index}

USERS = ['@arboleya', '@oorabona', '@PEM--']
tobjUsers = (-> {name: name, index: index} for name, index in USERS)()

Template.gridusers.helpers users: tobjUsers

Sample app, here: gridUsers. Source: repro

Hope that helps.

[ghost]

Hi @PEM--,

yes, thx. I could make this example, with the famousContext inside <body> tag and a Surface and a GridLayout, run so far. So this is working.

But as soon as I add an iron:router and replace the famousContext with

if (Meteor.isCordova) {
  Router.map(function () {
    this.route('home', {
      path: '/'
    });
  });
}

so the simplest possible routing, I get Uncaught TypeError: Cannot read property 'children' of null and the GridLayout doesn't show anymore (the Surface is still ok).

So this is the error tracked down, seems to be an issue with iron-router, at least in my case.

[PEM--]

If you use this URL http://repro.meteor.com and press on the white menu, you'll see a page transition. I'm using iron:router and a RenderController. Like before you can have a look in the code repo: Repo.

[ghost]

Hi there,

so maybe I need a RenderController then, or it is iron-router and Cordova. Nice transition btw.

[PEM--]

There are multiple way of doing it. @gadicc tied up the RenderController and iron:router for easing our jobs. But, you could use things like a LightBox, a Flipper, ... basically everything that could be hooked into iron:router.

[ghost]

So, GridLayout is working now inside a RenderController, but then the Surface doesn't show :( Idunno, I still got the impression that the whole thing isn't stable yet, or I'm doing sth wrong which also could be.

Update: Now it goes. The way I made it work is to put the {{#famousContext}} into the template. I can only recommend not to install a Meteor Boilerplate app but to create a project from scratch, add packages successively and check whether famo.us is functioning.

Thx again @PEM-- for helping out.