Examples

Filtering list

# get name of all properties on Element var items = Object.keys(Element:prototype).sort tag App prop query default: "" def render <self> # bind the input to our query property <input[query] type='text'> # render list with some inline css <ul css:height=200 css:overflow='auto'> # filter list while iterating for item in data when item.indexOf(query) >= 0 <li> item Imba.mount <App[items]>function iter$(a){ return a ? (a.toArray ? a.toArray() : a) : []; }; var Imba = require('imba'), _3 = Imba.createTagList, _2 = Imba.createTagMap, _1 = Imba.createElement; // get name of all properties on Element var items = Object.keys(Element.prototype).sort(); var App = Imba.defineTag('App', function(tag){ tag.prototype.__query = {'default': "",name: 'query'}; tag.prototype.query = function(v){ return this._query; } tag.prototype.setQuery = function(v){ this._query = v; return this; } tag.prototype._query = ""; tag.prototype.render = function (){ var $ = this.$, self = this; return self.$open(0).setChildren($.$ = $.$ || [ // bind the input to our query property _1('input',$,0,self).setType('text'), // render list with some inline css _1('ul',$,1,self).css('height',200).css('overflow','auto') ],2).synced(( $[0].bindData(self,'query',[]).end(), $[1].setContent( // filter list while iterating (function tagLoop($0) { var $$ = $0.$iter(); for (let i = 0, ary = iter$(self.data()), len = ary.length, item; i < len; i++) { item = ary[i]; if (item.indexOf(self.query()) < 0) { continue; }; $$.push(($0[i] || _1('li',$0,i)).setContent(item,3)); };return $$; })($[2] || _2($,2,$[1])) ,5).end() ,true)); }; }); Imba.mount((_1(App)).setData(items).end());

Master - Details

# get name of all properties on Element var notes = [ {body: "First note"} ] tag App prop note def addItem notes.unshift(body: "New Note") def render <self.hbox css:height=200> <aside> <ul> for item in notes <li .selected=(note == item) :tap.setNote(item)> <span> item:body <footer> <button :tap.addItem> "New note" if note <section> <textarea[note:body].full> Imba.mount <App>var Imba = require('imba'), _2 = Imba.createTagList, _1 = Imba.createElement; // get name of all properties on Element var notes = [ {body: "First note"} ]; var App = Imba.defineTag('App', function(tag){ tag.prototype.note = function(v){ return this._note; } tag.prototype.setNote = function(v){ this._note = v; return this; }; tag.prototype.addItem = function (){ return notes.unshift({body: "New Note"}); }; tag.prototype.render = function (){ var $ = this.$, self = this; return self.$open(0).flag('hbox').css('height',200).setChildren([ ($[0] || _1('aside',$,0,self).setContent([ _1('ul',$,1,0), _1('footer',$,3,0).setContent($[4] || _1('button',$,4,3).on$(0,['tap','addItem'],self).setText("New note"),2) ],2)).end(( $[1].setContent((function tagLoop($0) { var t0; for (let i = 0, len = $0.taglen = notes.length, item; i < len; i++) { item = notes[i]; (t0 = $0[i] || (t0=_1('li',$0,i)).setContent( t0.$.A || _1('span',t0.$,'A',t0) ,2)).flagIf('selected',(self.note() == item)).on$(0,['tap',['setNote',item]],self).end(( t0.$.A.setContent(item.body,3) ,true)); };return $0; })($[2] || _2($,2,$[1])),4) ,true)), self.note() ? ( ($[5] || _1('section',$,5,self).setContent($[6] || _1('textarea',$,6,5).flag('full'),2)).end(( $[6].bindData(self.note(),'body').end() ,true)) ) : void(0) ],1).synced(); }; }); Imba.mount((_1(App)).end());

Simple todo list

tag App prop items def addItem if @input.value items.push(title: @input.value) @input.value = "" def toggleItem item item:completed = !item:completed Imba.mount <App.vbox items=[] -> <form.bar :submit.prevent.addItem> <input@input> <button> 'add' <ul> for item in items <li .done=item:completed :tap.toggleItem(item)> item:titlefunction iter$(a){ return a ? (a.toArray ? a.toArray() : a) : []; }; var Imba = require('imba'), _2 = Imba.createTagList, _1 = Imba.createElement; var App = Imba.defineTag('App', function(tag){ tag.prototype.items = function(v){ return this._items; } tag.prototype.setItems = function(v){ this._items = v; return this; }; tag.prototype.addItem = function (){ var v_; if (this._input.value()) { this.items().push({title: this._input.value()}); return (this._input.setValue(v_ = ""),v_); }; }; tag.prototype.toggleItem = function (item){ return item.completed = !item.completed; }; }); Imba.mount((t0 = (t0=_1(App)).flag('vbox').setItems([]).setTemplate(function() { var $ = this.$, self = this, t0, t1; return Imba.static([ (t1 = $[0] || (t1=_1('form',$,0,t0)).flag('bar').on$(0,['submit','prevent','addItem'],self).setContent([ self._input = self._input||_1('input',t1).flag('input'), _1('button',$,1,t1).setText('add') ],2)).end(( self._input.end() ,true)), ($[2] || _1('ul',$,2,t0)).setContent((function tagLoop($0) { for (let i = 0, items = iter$(self.items()), len = $0.taglen = items.length, item; i < len; i++) { item = items[i]; ($0[i] || _1('li',$0,i)).flagIf('done',item.completed).on$(0,['tap',['toggleItem',item]],self).setContent(item.title,3); };return $0; })($[3] || _2($,3,$[2])),4) ],2,1); })).end());

More examples

Imba.io

This whole website is written in Imba. It uses the same code for server and client. After the initial load, all navigation in the browser is happening with history push/popState, and rendered directly on the client, yet any hard refresh should land you at the same spot when rendered from the server, thanks to using the same logic for routing as well. Grab it over at GitHub.

TodoMVC

The basic Imba implementation of TodoMVC is a good place to start playing around.

Hello World

Tiny application with webpack/imbapack setup.