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($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($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($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());