Learning RactiveJS – Create a RactiveJS component based on jQuery UI

Create a RactiveJS component

One of the strong points of RactiveJS is for sure the capacity of live together with other frameworks / libraries without being invasive at all – like many and well famous javascript libraries do, but it’s another story –

In this example, I’ll reuse the autocomplete jQuery UI widget and I will distribuite it as a ractive component with its binding properties and my custom preferences; the output page will be the following:

For downloading the example code, use the link at the bottom of the page

First off, import all the common javascript and css files that we use for this project.

for the making of the autocomplete component I’ll create a separate js.

This autocomplete is a simple editable combobox input; therefore, despite it shows me all the suggested values I load in there, it is possible to put any value I want.

Notice that component can load its template also in a more readable way throught ractive load plugin ; for this purpose refer at page ractive load. The attached example is already configured to use this plugin by just adjusting a few lines of code.

Now I can load this component in the main page:

The output page is the following:

Download code 1442252194_floppy_disk_save

Be the first to comment

Leave a Reply

Your email address will not be published.

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax