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

var 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;
var 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 tagLoop($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

var options = ['React','Vue','Imba','Angular','Ember']
var 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> item

var Imba = require('imba'), _2 = Imba.createTagList, _1 = Imba.createElement;
var options = ['React','Vue','Imba','Angular','Ember'];
var 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 tagLoop($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 tagLoop($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


var options = [
    { name: 'React', url: "reactjs.org" }
    { name: 'Vue', url: "vuejs.org" }
    { name: 'Imba', url: "imba.io" }
    { name: 'Angular', url: "angular.io" }
]

var 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;

var options = [
	{name: 'React',url: "reactjs.org"},
	{name: 'Vue',url: "vuejs.org"},
	{name: 'Imba',url: "imba.io"},
	{name: 'Angular',url: "angular.io"}
];

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