Stack Overflow
Stack Overflow

Questions tagged [ractivejs]

Ractive.js is a non-opinionated JavaScript library for building reactive user interfaces.

Ractive.js is a template-driven UI JavaScript library for building reactive user interfaces in a way that doesn't force you into a particular framework's way of thinking. Its features include:

  • Data-binding, with a beautiful declarative syntax
  • Event handling that doesn't make you frustrated
  • Flexible and performant animations and transitions

...among many others. It takes a radically different approach to DOM manipulation - one that saves both you and the browser unnecessary work.

Home page: ractive.js.org.

432 questions
16
votes
1 answer

How do I add gridstack.js to Ractive.js?

I am creating example application with Ractive.js and gridstack.js, but can't figure out how to add gridstack as a decorator. I think this is the proper way to add jQuery elements to ractive.js, please advise if it's not. After I created a…
Orbitum
  • 1,585
  • 5
  • 27
  • 47
9
votes
1 answer

RactiveJS and jQuery plugins

I have a form with multiple fields, some of them being for plain text and some of them require plugins for advanced select and upload capability. There are 2 problems with this: ractive needs to parse the template and render it before I can attach…
user2887067
  • 93
  • 3
6
votes
1 answer

Expected length error in Ractive/Paths.js demo

I'm trying out a simplified version of the pie chart demo from Paths.js' website at http://andreaferretti.github.io/paths-js-demo/, to understand how it works when used with Ractive. I have most of it working locally, except for one error that I've…
Alex Libby
  • 81
  • 1
6
votes
0 answers

Ractive teardown/re-render with partials doesn't re-render partials

Here's the fiddle (sorry about the alerts) http://jsfiddle.net/PCcqJ/92/ var ractive = new Ractive({ template: '#templateOne', partials: { aPartial: '
Oh look, the partial is rendered!
' } }); function cb() { …
narthur157
  • 864
  • 1
  • 8
  • 17
6
votes
2 answers

How to create Ractive's subcomponents dynamically and change them programmatically

I can instantiate (sub)components manually using tags, but I don't know how to do it dynamically, or, how to insert and remove different components in the same area using tags. Today I instantiate each (sub)component this way: Ractive.load(…
Paulo Coghi
  • 13,724
  • 14
  • 68
  • 90
6
votes
1 answer

How can I use a local file during Require.js optimisation, but a CDN-hosted version at runtime?

My page includes several components that exist as separate AMD modules. Each of these components is turned into a single file by the Require.js optimiser. Because several of these components share dependencies (e.g. jQuery and d3), the optimiser…
Rich Harris
  • 28,091
  • 3
  • 84
  • 99
5
votes
2 answers

RactiveJS + Redux dispatch actions and hydrate

I am trying to set up RactiveJS with Redux for small example application - initialize dashboard (from AJAX), add/remove elements (widgets) from dashboard (and save serialized data on server). As there are tutorials almost exclusively for React, then…
Orbitum
  • 1,585
  • 5
  • 27
  • 47
5
votes
1 answer

Add item to the beginning of the list

I've been using the following code to add new comment to the end of the list: ractive.push('BlogPosts.BlogPostId.Comments', newComment); But now I need to add an item to the beginning of the list. I've looked through ractive documentation but did…
SiberianGuy
  • 24,674
  • 56
  • 152
  • 266
5
votes
2 answers

Async Data Loading in Ractive.js

I like to pull in some remote data when rendering a ractive template. Due to the async nature of the request no data makes it into output. How can I make that happen? var ractive = new Ractive({ debug: true, el: 'container', …
Stan Wiechers
  • 1,962
  • 27
  • 45
5
votes
2 answers

Ractive and arrays, data not being updated

I'm learning how to use ractive and can't solve a problem, the code is at the following jsfiddle. The gist of what I'm doing is counters for a queue (last object in array is current person): 1. A counter to display the queue number of the current…
trashbear
  • 109
  • 5
4
votes
1 answer

Can Ractive events work in markup rendered with the triple-stash syntax?

If I have the following in my Ractive template: click me Then I can listen for the click with this: app.on({ handleClick:function() { alert("clicked!") ; } }) But lets say I have that same markup…
Dave
  • 1,204
  • 2
  • 14
  • 25
4
votes
1 answer

How to mock an ajax call in mocha using sinon without setting timeout on a ractive component using reflux store

I have a working ractive component test case already with mocha using sinon ans able to mock an ajax call but with the help of setTimeout(function(){}, 100) and I dont like using it. beforeEach(function () { this.container =…
jaygel adoptante
  • 63
  • 7
4
votes
2 answers

How to get a named loop variable in ractive.js?

In Python, iteration gives me a named variable: for cage in cages: for animal in cage.animals: print("The current cage is",cage) print("the current animal is",animal) In Ractive templates, I don't appear to be able to do…
trvrm
  • 784
  • 5
  • 17
4
votes
1 answer

frequent data update for ractive.js

I was thinking on rewriting our legacy app which is using pure jQuery. It renders log data which it gets by websocket, it shows only last 100 records by removing old ones and appending new ones. Because rendering speed matters, I've tried first to…
nateless
  • 475
  • 6
  • 23
1
2 3
…
28 29