Question: using famo code in templates with {{}}

[ganySA]

I am trying to implement the tab from Flex tabs (sorry new to famo - totally different way of thinking in terms of layouts).

I have manged to get as far as Register it

FView.registerView('TabBar', Flex.TabBar)

I am getting a bit stuck trying to get the below code to work with a {{#TabBar}}

How would i go about accessing {{#TabBar}} to for example call setItems?

var tabBar = new TabBar({
    createRenderables: {
        background: true,
        selectedItemOverlay: true
   }
});
tabBar.setItems([
    'one',
    'two',
    'three'
]);

this.add(tabBar);

[gadicc]

Hey @ganySA. Once you've registered a view in famous-views, you can use it in your markup (templates) without any more JS. Just putting it in the template is the same as instantiating a new instance and adding it to the parent.

I haven't looked at the flex tabs yet, so I can't promise this will work, but looking at your code above, FView.registerView('TabBar', Flex.TabBar) and then:

{{#famousContext id="mainCtx"}}
  {{>tabBar template="myTabBar" createRenderables='{"backgruond":true,"selectedItemOverlay":true}'}}
{{/famousContext}}

<template name="myTabBar"></template>

Template.myTabBar.onRendered(function() {
  var fview = FView.from(this);
  fview.view.setItems([ 'one', 'two', 'three' ]);
});

will do what you want. It's a little bit of a weird example, since as I said I don't know tabbar yet... usually we'd just put surfaces inside the {{#TabBar}} and set everything up like that. But you have to do it by JavaScript, you need to use the inclusion (the {{>TabBar template="..."}}) to be able to set up life cycle callbacks like onRendered, and run the JS from there.

Also, it's unfortunate about the JSON, but necessary for two level deep parameters. If you prefer, you can do something like createRenderables=createRenderables and then have e.g.

Template.containingTemplate.helpers({
  createRenderables: {
        background: true,
        selectedItemOverlay: true
  }
});

The be clear, the earlier markup (template) has the same effect as the following javascript:

var context = famous.core.Engine.createContext();
var tabBar = new TabBar( { createRenderables: ... } );
tabBar.setItems( ... );
context.add(tabBar);

but everything except the setItems() is in markup.

I hope that's clear. This is maybe a bit too much jump into if you're testing getting started :> But maybe soon someone will test it all out and document a good way to use TabBar in famous-views. Since it's part of famous-flex, I might get to it soon too as time allows.

Also referencing: https://github.com/gadicc/meteor-famous-views/issues/234

[gadicc]

I think this is answered but feel free to re-open if anything unclear.

Main answer to this question is the Views README.

Let's talk about anything specific about TabBar in #234.