How to use the ractive function in ractive

To help you get started, we’ve selected a few ractive examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github PaquitoSoft / notetaker-ractive / app / js / app.js View on Github external
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!');
	},
github stewartml / ractive-validator / test / index.js View on Github external
it('should set an error message when a field is updated', function () {
      let ractive = new Ractive({data: {a: {b: ''}}});
      let validator = new RactiveValidator('a', ractive, {b: {type: 'integer'}});
      ractive.set('b', 'fish');
      expect(ractive.get('bMsg')).to.equal('must be a whole number');
    });
github fcamarlinghi / expresso / src / core / Settings.js View on Github external
{
                this.logger.warn('Error parsing settings from JSON, starting clean.');
            }
        }
        else
        {
            this.logger.warn('Error reading settings file, starting clean.');
        }

        if (this._ractive)
        {
            this._ractive.teardown();
            this._ractive = null;
        }

        this._ractive = new Ractive({

            data: {
                settings: extend(true, {}, this.defaults, settings),
            },

        });
    }
github gngeorgiev / firesync / src / firesyncBase.js View on Github external
bindTo(settings) {
        _.extend(settings, {
            data: this
        });

        let ractive = new Ractive(settings);
        let reactiveListeners = new Map();

        let domBinding = new FiresyncBinding(constants.BINDING_TYPE.DOM, {ractive, settings}, this);
        domBinding.updateLocal((property, value) => {
            return new Promise((resolve) => {
                if (ractive.get(property) === value) {
                    return resolve();
                }
                
                if (this[property] === value) {
                    //we need to fire the bindings ourselves since the 
                    //Object.observe callback will not be invoked
                    
                    this._updateBindings({
                        property,
                        value,