mikowals/explanation.txt

## explanation.txt
Reproduction of problem getting Bootstrap / JQuery to work with Meteor reactivity

using Meteor 0.8.0-rc0

meteor add bootstrap

Button text stops changing between 'action1' and 'action2' after it has been clicked and had $().button('loading') called.

## form.html
<head>
  <title>uiTest</title>
</head>

<body>
  {{> main}}
</body>

<template name="main">
  <h1>Hello World!</h1>
  <form>
  <button type="submit" id="submit" data-loading-text="working...">{{buttonText}}</button>
  </form>
  <button type="button" id="actionChange">Change Button Text</button>
</template>

## form.js
if (Meteor.isClient) {
  Session.setDefault("action1", "true");

  Template.main.buttonText = function () {
    return Session.equals( "action1", true) ? "action1" : "action2";
  };

  Template.main.events({
    'submit': function (e) {
      e.preventDefault();
      $( '#submit' ).button('loading');
      if (typeof console !== 'undefined')
        console.log("You pressed the button");
      Meteor.setTimeout( function(){
        $( '#submit' ).button('reset');
      }, 1000);
      return false;
    },

    'click #actionChange': function( e ){
      Session.set( "action1", Session.equals( "action1", false ));
    }
  });
}
	Reproduction of problem getting Bootstrap / JQuery to work with Meteor reactivity

	using Meteor 0.8.0-rc0

	meteor add bootstrap

	Button text stops changing between 'action1' and 'action2' after it has been clicked and had $().button('loading') called.
	<head>
	<title>uiTest</title>
	</head>

	<body>
	{{> main}}
	</body>

	<template name="main">
	<h1>Hello World!</h1>
	<form>
	<button type="submit" id="submit" data-loading-text="working...">{{buttonText}}</button>
	</form>
	<button type="button" id="actionChange">Change Button Text</button>
	</template>
	if (Meteor.isClient) {
	Session.setDefault("action1", "true");

	Template.main.buttonText = function () {
	return Session.equals( "action1", true) ? "action1" : "action2";
	};

	Template.main.events({
	'submit': function (e) {
	e.preventDefault();
	$( '#submit' ).button('loading');
	if (typeof console !== 'undefined')
	console.log("You pressed the button");
	Meteor.setTimeout( function(){
	$( '#submit' ).button('reset');
	}, 1000);
	return false;
	},

	'click #actionChange': function( e ){
	Session.set( "action1", Session.equals( "action1", false ));
	}
	});
	}