Form Input Bindings

Basic Usage

Text

var store = {message: ""} Imba.mount <section -> <input[store:message]> <div> "Message is {store:message}"var Imba = require('imba'), _1 = Imba.createElement; var store = {message: ""}; Imba.mount((t0 = (t0=_1('section'))).setTemplate(function() { var $ = this.$, t0; return Imba.static([ ($[0] || _1('input',$,0,t0)).bindData(store,'message').end(), ($[1] || _1('div',$,1,t0)).setText("Message is " + (store.message)) ],2,1); }).end());

Range

var data = {counter: 50} Imba.mount <div -> <input[data:counter] type='range' min=0 max=100 step=1> <div> "Count is {data:counter}"var Imba = require('imba'), _1 = Imba.createElement; var data = {counter: 50}; Imba.mount((t0 = (t0=_1('div'))).setTemplate(function() { var $ = this.$, t0; return Imba.static([ ($[0] || _1('input',$,0,t0).setType('range').setMin(0).setMax(100).setStep(1)).bindData(data,'counter').end(), ($[1] || _1('div',$,1,t0)).setText("Count is " + (data.counter)) ],2,1); }).end());

Checkbox

var store = { message: "" enabled: false } Imba.mount <div.grid -> <input[store:enabled] type='checkbox'> <span> "enabled: {store:enabled}"var Imba = require('imba'), _1 = Imba.createElement; var store = { message: "", enabled: false }; Imba.mount((t0 = (t0=_1('div')).flag('grid')).setTemplate(function() { var $ = this.$, t0; return Imba.static([ ($[0] || _1('input',$,0,t0).setType('checkbox')).bindData(store,'enabled').end(), ($[1] || _1('span',$,1,t0)).setText("enabled: " + (store.enabled)) ],2,1); }).end());

Multiple checkboxes

const data = {skills: ["Literacy"]} Imba.mount <div -> <header.bar> for option in ['React','Vue','Imba','Angular','Ember'] <label.pill> <input[data:skills] type='checkbox' value=option> <span> option <div> "Your skills: {data:skills.join(", ")}"var Imba = require('imba'), _2 = Imba.createTagList, _1 = Imba.createElement; const data = {skills: ["Literacy"]}; Imba.mount((t0 = (t0=_1('div'))).setTemplate(function() { var $ = this.$, t0; return Imba.static([ ($[0] || _1('header',$,0,t0).flag('bar')).setContent((function($0) { var t0; for (let i = 0, items = ['React','Vue','Imba','Angular','Ember'], len = $0.taglen = items.length, option; i < len; i++) { option = items[i]; (t0 = $0[i] || (t0=_1('label',$0,i)).flag('pill').setContent([ _1('input',t0.$,'A',t0).setType('checkbox'), _1('span',t0.$,'B',t0) ],2)).end(( t0.$.A.bindData(data,'skills').setValue(option,1).end(), t0.$.B.setContent(option,3) ,true)); };return $0; })($[1] || _2($,1,$[0])),4), ($[2] || _1('div',$,2,t0)).setText("Your skills: " + data.skills.join(", ")) ],2,1); }).end());

Select & Radio

const options = ['React','Vue','Imba','Angular','Ember'] const data = {choice: null} Imba.mount <div -> # binding select to choice <select[data:choice]> for item in options <option> item # render an input radio for every option <header.bar> for item in options <label.pill> <input[data:choice] type='radio' value=item> <span> itemvar Imba = require('imba'), _2 = Imba.createTagList, _1 = Imba.createElement; const options = ['React','Vue','Imba','Angular','Ember']; const data = {choice: null}; Imba.mount((t0 = (t0=_1('div'))).setTemplate(function() { var $ = this.$, t0; return Imba.static([ ($[0] || _1('select',$,0,t0)).bindData(data,'choice').setContent((function($0) { for (let i = 0, len = $0.taglen = options.length; i < len; i++) { ($0[i] || _1('option',$0,i)).setContent(options[i],3); };return $0; })($[1] || _2($,1,$[0])),4).end(), // render an input radio for every option ($[2] || _1('header',$,2,t0).flag('bar')).setContent((function($0) { var t0; for (let i = 0, len = $0.taglen = options.length, item; i < len; i++) { item = options[i]; (t0 = $0[i] || (t0=_1('label',$0,i)).flag('pill').setContent([ _1('input',t0.$,'A',t0).setType('radio'), _1('span',t0.$,'B',t0) ],2)).end(( t0.$.A.bindData(data,'choice').setValue(item,1).end(), t0.$.B.setContent(item,3) ,true)); };return $0; })($[3] || _2($,3,$[2])),4) ],2,1); }).end());

Rich values

const options = [ { name: 'React', url: "reactjs.org" } { name: 'Vue', url: "vuejs.org" } { name: 'Imba', url: "imba.io" } { name: 'Angular', url: "angular.io" } ] const data = {choice: ""} Imba.mount <div -> # binding select to rich objects <select[data:choice]> <option disabled value=""> "Please select one" for item in options <option value=item> item:name if let framework = data:choice <div> <h2> "Framework of choice:" <div> "{framework:name} ({framework:url})"var Imba = require('imba'), _2 = Imba.createTagList, _1 = Imba.createElement; const options = [ {name: 'React',url: "reactjs.org"}, {name: 'Vue',url: "vuejs.org"}, {name: 'Imba',url: "imba.io"}, {name: 'Angular',url: "angular.io"} ]; const data = {choice: ""}; Imba.mount((t0 = (t0=_1('div'))).setTemplate(function() { var $ = this.$, t0, framework; return Imba.static([ ($[0] || _1('select',$,0,t0)).bindData(data,'choice').setContent([ $[1] || _1('option',$,1,0).setDisabled('disabled').setValue("",1).setText("Please select one"), (function($0) { for (let i = 0, len = $0.taglen = options.length, item; i < len; i++) { item = options[i]; ($0[i] || _1('option',$0,i)).setValue(item,1).setContent(item.name,3).end(); };return $0; })($[2] || _2($,2,$[0])) ],1).end(( $[1].end() ,true)), (framework = data.choice) ? ( ($[3] || _1('div',$,3,t0).setContent([ _1('h2',$,4,3).setText("Framework of choice:"), _1('div',$,5,3) ],2)).end(( $[5].setText("" + (framework.name) + " (" + (framework.url) + ")") ,true)) ) : void(0) ],1,1); }).end());

Example

var store = people: [{ name: "" skills: ["Curiosity","Literacy"] confirmed: false }] tag Form < form prop confirmed prop person def addSkill e person:skills.push(e.target.value) e.target.value = '' def onsubmit e e.prevent window.alert("Submitted!") def render <self> <input[person:name] type='text' placeholder="Your name..."> <input placeholder="Add skill..." :keyup.enter.prevent.addSkill> <div.bar> for skill in person:skills <label.pill> <input[person:skills] type='checkbox' value=skill> <span> skill <footer> <label.pill> <input[confirmed] type='checkbox'> <span> "I, {person:name or "Unnamed"}, confirm this" <button disabled=!confirmed> "Submit Form" Imba.mount <Form person=store:people[0]>function iter$(a){ return a ? (a.toArray ? a.toArray() : a) : []; }; var Imba = require('imba'), _2 = Imba.createTagList, _1 = Imba.createElement; var store = { people: [{ name: "", skills: ["Curiosity","Literacy"], confirmed: false }] }; var Form = Imba.defineTag('Form', 'form', function(tag){ tag.prototype.confirmed = function(v){ return this._confirmed; } tag.prototype.setConfirmed = function(v){ this._confirmed = v; return this; }; tag.prototype.person = function(v){ return this._person; } tag.prototype.setPerson = function(v){ this._person = v; return this; }; tag.prototype.addSkill = function (e){ var v_; this.person().skills.push(e.target().value()); return (e.target().setValue(v_ = ''),v_); }; tag.prototype.onsubmit = function (e){ e.prevent(); return window.alert("Submitted!"); }; tag.prototype.render = function (){ var $ = this.$, self = this; return self.$open(0).setChildren($.$ = $.$ || [ _1('input',$,0,self).setType('text').setPlaceholder("Your name..."), _1('input',$,1,self).setPlaceholder("Add skill...").on$(0,['keyup','enter','prevent','addSkill'],self), _1('div',$,2,self).flag('bar'), _1('footer',$,4,self).setContent([ _1('label',$,5,4).flag('pill').setContent([ _1('input',$,6,5).setType('checkbox'), _1('span',$,7,5) ],2), _1('button',$,8,4).setText("Submit Form") ],2) ],2).synced(( $[0].bindData(self.person(),'name').end(), $[1].end(), $[2].setContent((function($0) { var t0; for (let i = 0, items = iter$(self.person().skills), len = $0.taglen = items.length, skill; i < len; i++) { skill = items[i]; (t0 = $0[i] || (t0=_1('label',$0,i)).flag('pill').setContent([ _1('input',t0.$,'A',t0).setType('checkbox'), _1('span',t0.$,'B',t0) ],2)).end(( t0.$.A.bindData(self.person(),'skills').setValue(skill,1).end(), t0.$.B.setContent(skill,3) ,true)); };return $0; })($[3] || _2($,3,$[2])),4), $[6].bindData(self,'confirmed',[]).end(), $[7].setText("I, " + (self.person().name || "Unnamed") + ", confirm this"), $[8].setDisabled(!(self.confirmed())).end() ,true)); }; }); Imba.mount((_1(Form)).setPerson(store.people[0]).end());