raix/controllers-demo.html

## controllers-demo.html
<head>
  <title>controllers-demo</title>
</head>

<body>
  <div class="container">
    {{> body}}
  </div>
</body>

<template name="body">
  <div class="row">

    <div class="span6">
      <h2>Add something</h2>
      {{> myForm}}
    </div>

    <div class="span6">
      <h2>Most recent five entries</h2>
      <ul>
        {{#each entries}}
        <li>{{#markdown}}{{message}}{{/markdown}}</li>
        {{/each}}
      </ul>
    </div>

  </div>
</template>


<template name="myForm">
        Your message: {{> ContinuouslySavingTextArea "entry" style="color: blue;" parent=this}}<br>
        {{> SaveButton}}<br>
        {{charsLeft}} chars left
        <hr>
        <em>Preview:</em><br>
{{#markdown}}{{entry}}{{/markdown}}
</template>

<template name="ContinuouslySavingTextAreaView">
  <textarea class="textbox" style="{{style}}"/></textarea>
  {{this.charsLeft}} <!-- This is a function in ContinuouslySavingTextAreaView, returns 'foo'-->
  {{charsLeft}} <!-- handed down from parent or higher -->
</template>

<template name="SaveButtonView">
  <input type="submit" value="Save">
</template>

<template name="TextBoxView">
  <input type="text" class="textbox">
</template>

## controllers-demo.js
// Extend template scope myForm with extra js functions that are made available as helpers
Template.myForm.extend({
  onSave: function () { // The saveButton widget calls parent.onSave
    Meteor.call('addEntry', this.get("entry"));
    this.set("entry", "");
  },
  charsLeft: function () { // get is reactive
    return 140 - (this.get("entry") || '').length;
  }
});

// Define a widget new widget by inheriting/extending the Textbox widget
// Widgets are likewise made available as helpers?
ContinuouslySavingTextArea = TextBox.extend({
  savePolicy: "continuous",
  template: Template.ContinuouslySavingTextAreaView,
  charsLeft: function () {
    return 'foo';
  }
});

/////////////////////////////////////////

var SaveButtonController = Controller.extend({
  init: function (what) {
  },
  events: {
    'click input': function () {
      var form = this.parent(Component.Form); // Would be nice if one could test for parent types in general
      if (! form)
        throw new Error("Save button not inside a form");
      form.save();
    }
  }
});

Component.Form = new Meteor.Container({

});

Component.SaveButton = new Meteor.Component({
  controller: SaveButtonController,
  template: Template.SaveButtonView
});

/////////////////////////////////////////

Component.Textbox = new Meteor.Component({
  template: Template.TextBoxView,
  controller: Controller.extend({})
});

Template.body.entries = function () {
  return Entries.find({}, {sort: {when: -1}, limit: 5})
};
	<head>
	<title>controllers-demo</title>
	</head>

	<body>
	<div class="container">
	{{> body}}
	</div>
	</body>

	<template name="body">
	<div class="row">

	<div class="span6">
	<h2>Add something</h2>
	{{> myForm}}
	</div>

	<div class="span6">
	<h2>Most recent five entries</h2>
	<ul>
	{{#each entries}}
	<li>{{#markdown}}{{message}}{{/markdown}}</li>
	{{/each}}
	</ul>
	</div>

	</div>
	</template>


	<template name="myForm">
	Your message: {{> ContinuouslySavingTextArea "entry" style="color: blue;" parent=this}}<br>
	{{> SaveButton}}<br>
	{{charsLeft}} chars left
	<hr>
	<em>Preview:</em><br>
	{{#markdown}}{{entry}}{{/markdown}}
	</template>

	<template name="ContinuouslySavingTextAreaView">
	<textarea class="textbox" style="{{style}}"/></textarea>
	{{this.charsLeft}} <!-- This is a function in ContinuouslySavingTextAreaView, returns 'foo'-->
	{{charsLeft}} <!-- handed down from parent or higher -->
	</template>

	<template name="SaveButtonView">
	<input type="submit" value="Save">
	</template>

	<template name="TextBoxView">
	<input type="text" class="textbox">
	</template>
	// Extend template scope myForm with extra js functions that are made available as helpers
	Template.myForm.extend({
	onSave: function () { // The saveButton widget calls parent.onSave
	Meteor.call('addEntry', this.get("entry"));
	this.set("entry", "");
	},
	charsLeft: function () { // get is reactive
	return 140 - (this.get("entry") \|\| '').length;
	}
	});

	// Define a widget new widget by inheriting/extending the Textbox widget
	// Widgets are likewise made available as helpers?
	ContinuouslySavingTextArea = TextBox.extend({
	savePolicy: "continuous",
	template: Template.ContinuouslySavingTextAreaView,
	charsLeft: function () {
	return 'foo';
	}
	});

	/////////////////////////////////////////

	var SaveButtonController = Controller.extend({
	init: function (what) {
	},
	events: {
	'click input': function () {
	var form = this.parent(Component.Form); // Would be nice if one could test for parent types in general
	if (! form)
	throw new Error("Save button not inside a form");
	form.save();
	}
	}
	});

	Component.Form = new Meteor.Container({

	});

	Component.SaveButton = new Meteor.Component({
	controller: SaveButtonController,
	template: Template.SaveButtonView
	});

	/////////////////////////////////////////

	Component.Textbox = new Meteor.Component({
	template: Template.TextBoxView,
	controller: Controller.extend({})
	});

	Template.body.entries = function () {
	return Entries.find({}, {sort: {when: -1}, limit: 5})
	};