How to use ractive - 10 common examples

import Ractive from 'ractive';
import Template from '../../views/user-page.html';
import UserProfile from './user/profile-section';
import Repos from './user/repos-section';
import Notes from './user/notes-section';

var UserPage = Ractive.components.UserPage = Ractive.extend({
	template: Template,
	components: {
		UserProfile: UserProfile,
		Repos: Repos,
		Notes: Notes
	},
	oninit() {
		this.observe('req', (request) => {
			this.set('user', request.body.user);
		});

		// *.*, *.AddUserNote, AddNote.*, AddNote.AddUserNote
		this.on('*.AddUserNote', (newNote) => {
			console.log('UserPage::createNote# Adding new note to user:', this.get('user').profile.login);
			this.get('user').addNote(newNote);
		});

import Ractive from 'ractive';
import template from '../views/app.html';

import * as RouterPlugin from './plugins/router';
import routesConfiguration from './config/routes';

import RouterComponent from './components/layout/router';
import SearchUserComponent from './components/layout/search-user';
import HomePageComponent from './components/home-page';
import UserPageComponent from './components/user-page'



let App = new Ractive({
	el: '#app',
	template: template,
	components: {
		SearchUser: SearchUserComponent,
		Router: RouterComponent,
		EmptyPage: Ractive.extend({ template: '' })
	},
	data: {
		componentName: 'EmptyPage'
	},
	oncomplete() {
		// Wait for the app to be rendered so we properly handle transition
		// from EmptyPage to the one the URL dictates
		RouterPlugin.init(routesConfiguration, this.onNavigation.bind(this));
		console.log('App::oninit# Application initialized!');
	},

// if a click event is specified propagate the click event

		console.log('Button event');

		if (this.get('onclick')) {
			console.log('Firing event');
			this.fire(this.get('onclick'), this);
		}

		// prevent bubbling
		return true;
	}
});

RactiveF.components['ux-col'] = Ractive.extend({
	template: RactiveF.templates['ux-col']
});

RactiveF.components['ux-content'] = Ractive.extend({
	template: RactiveF.templates['ux-content'],
	computed: {
		guid: function () {
			return this._guid;
		}
	}
});

RactiveF.components['ux-header'] = Ractive.extend({
	template: RactiveF.templates['ux-header']
});

function gulpRactive() {

	Ractive.DEBUG = false;

	var stream = through.obj(function (file, enc, callback) {

		var stream = this;

		if (file.isStream()) {
			stream.emit('error', new PluginError(PLUGIN_NAME, 'Streams are not supported!'));
			return callback();
		}

		try {
			// FIXME: Fix relative path
			var ractivef = require('../public/js/ractivef-cjs.js');

			var filecontents = String(file.contents);

var self = this;
		var topbar = self.find('.top-bar');
		var topbarOffset = RactiveF.elementOffset(topbar);

		window.onscroll = function (e) {
			if (self.get('issticky')) {
				self.set('isfixed', RactiveF.pageYOffset() > topbarOffset.top);
			}
		};

	}

});

RactiveF.components['ux-top-bar-items'] = Ractive.extend({
	template: RactiveF.templates['ux-top-bar-items'],
	data: {
		getTopBarItemCssClass: function (item) {
			var classes = [];
			if (item.active) {
				classes.push('active');
			}
			if (item.hasForm) {
				classes.push('has-form');
			}
			if (item.items && item.items.length > 0) {
				// Note: not-click needed for focus/hover with html class=js. Silly.
				classes.push('has-dropdown not-click');
			}
			return classes.join(' ');
		}

buildIcon: result => statusIconCls[result],
	};
}

function oninit () {
	this.on({ openCI });
	// this.observe('issue', function (value) {
	// 	if (this.el && value) this.monitorPr(value);
	// });
}

function onrender () {
	monitorPr.call(this, this.get('issue'));
}

module.exports = Ractive.extend({ template, data, oninit, onrender });

// Ractive setup
import Ractive from 'ractive';
Ractive.DEBUG = !RELEASE;
Ractive.components['core-button'] = CoreButton;
Ractive.components['core-checkbox'] = CoreCheckbox;
Ractive.components['core-colorbox'] = CoreColorbox;
Ractive.components['core-combobox'] = CoreCombobox;
Ractive.components['core-dropdown'] = CoreDropdown;
Ractive.components['core-extension'] = CoreExtension;
Ractive.components['core-icon'] = CoreIcon;
Ractive.components['core-icon-button'] = CoreIconButton;
Ractive.components['core-label'] = CoreLabel;
Ractive.components['core-menu'] = CoreMenu;
Ractive.components['core-menu-button'] = CoreMenuButton;
Ractive.components['core-menu-item'] = CoreMenuItem;
Ractive.components['core-menu-separator'] = CoreMenuSeparator;
Ractive.components['core-numberbox'] = CoreNumberbox;
Ractive.components['core-slider'] = CoreSlider;
Ractive.components['core-textbox'] = CoreTextbox;
Ractive.components['core-throbber'] = CoreThrobber;
Ractive.components['core-toolbar'] = CoreToolbar;

Ractive.decorators['core-tooltip'] = CoreTooltip;
Ractive.decorators['core-visible'] = CoreVisible;

Ractive.events['tap'] = RactiveTap;

import CoreVisible from './ui/core-visible/core-visible.js';

import RactiveTap from 'ractive-events-tap';

// Ractive setup
import Ractive from 'ractive';
Ractive.DEBUG = !RELEASE;
Ractive.components['core-button'] = CoreButton;
Ractive.components['core-checkbox'] = CoreCheckbox;
Ractive.components['core-colorbox'] = CoreColorbox;
Ractive.components['core-combobox'] = CoreCombobox;
Ractive.components['core-dropdown'] = CoreDropdown;
Ractive.components['core-extension'] = CoreExtension;
Ractive.components['core-icon'] = CoreIcon;
Ractive.components['core-icon-button'] = CoreIconButton;
Ractive.components['core-label'] = CoreLabel;
Ractive.components['core-menu'] = CoreMenu;
Ractive.components['core-menu-button'] = CoreMenuButton;
Ractive.components['core-menu-item'] = CoreMenuItem;
Ractive.components['core-menu-separator'] = CoreMenuSeparator;
Ractive.components['core-numberbox'] = CoreNumberbox;
Ractive.components['core-slider'] = CoreSlider;
Ractive.components['core-textbox'] = CoreTextbox;
Ractive.components['core-throbber'] = CoreThrobber;
Ractive.components['core-toolbar'] = CoreToolbar;

Ractive.decorators['core-tooltip'] = CoreTooltip;
Ractive.decorators['core-visible'] = CoreVisible;

Ractive.events['tap'] = RactiveTap;

import CoreTooltip from './ui/core-tooltip/core-tooltip.js';
import CoreVisible from './ui/core-visible/core-visible.js';

import RactiveTap from 'ractive-events-tap';

// Ractive setup
import Ractive from 'ractive';
Ractive.DEBUG = !RELEASE;
Ractive.components['core-button'] = CoreButton;
Ractive.components['core-checkbox'] = CoreCheckbox;
Ractive.components['core-colorbox'] = CoreColorbox;
Ractive.components['core-combobox'] = CoreCombobox;
Ractive.components['core-dropdown'] = CoreDropdown;
Ractive.components['core-extension'] = CoreExtension;
Ractive.components['core-icon'] = CoreIcon;
Ractive.components['core-icon-button'] = CoreIconButton;
Ractive.components['core-label'] = CoreLabel;
Ractive.components['core-menu'] = CoreMenu;
Ractive.components['core-menu-button'] = CoreMenuButton;
Ractive.components['core-menu-item'] = CoreMenuItem;
Ractive.components['core-menu-separator'] = CoreMenuSeparator;
Ractive.components['core-numberbox'] = CoreNumberbox;
Ractive.components['core-slider'] = CoreSlider;
Ractive.components['core-textbox'] = CoreTextbox;
Ractive.components['core-throbber'] = CoreThrobber;
Ractive.components['core-toolbar'] = CoreToolbar;

Ractive.decorators['core-tooltip'] = CoreTooltip;
Ractive.decorators['core-visible'] = CoreVisible;

Ractive.events['tap'] = RactiveTap;

import CoreTooltip from './ui/core-tooltip/core-tooltip.js';
import CoreVisible from './ui/core-visible/core-visible.js';

import RactiveTap from 'ractive-events-tap';

// Ractive setup
import Ractive from 'ractive';
Ractive.DEBUG = !RELEASE;
Ractive.components['core-button'] = CoreButton;
Ractive.components['core-checkbox'] = CoreCheckbox;
Ractive.components['core-colorbox'] = CoreColorbox;
Ractive.components['core-combobox'] = CoreCombobox;
Ractive.components['core-dropdown'] = CoreDropdown;
Ractive.components['core-extension'] = CoreExtension;
Ractive.components['core-icon'] = CoreIcon;
Ractive.components['core-icon-button'] = CoreIconButton;
Ractive.components['core-label'] = CoreLabel;
Ractive.components['core-menu'] = CoreMenu;
Ractive.components['core-menu-button'] = CoreMenuButton;
Ractive.components['core-menu-item'] = CoreMenuItem;
Ractive.components['core-menu-separator'] = CoreMenuSeparator;
Ractive.components['core-numberbox'] = CoreNumberbox;
Ractive.components['core-slider'] = CoreSlider;
Ractive.components['core-textbox'] = CoreTextbox;
Ractive.components['core-throbber'] = CoreThrobber;
Ractive.components['core-toolbar'] = CoreToolbar;

Ractive.decorators['core-tooltip'] = CoreTooltip;
Ractive.decorators['core-visible'] = CoreVisible;

Ractive.events['tap'] = RactiveTap;