eccegordo/jsbin.URuSIWO.css

## jsbin.URuSIWO.css
/* Put your CSS here */
html, body {
    margin: 20px;
}

## jsbin.URuSIWO.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
</head>
<body>

  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="index">

    Is search allowed by controller: {{ allowSearchBehavior }}

    <hr />

    <ul>
    {{#each item in model}}
      <li>{{item}}</li>
    {{/each}}
    </ul>

    <hr />

    {{search-box name="Primary Search Box" searchFunction="searchBackend"}}

    <hr />

    {{search-box name="Alternate Search Box" searchFunction="alternateSearchBackend"}}

    <hr />

    {{search-box name="Search box gets it state from controller" searchFunction="alternateSearchBackend" startSearchAllowed=allowSearchBehavior }}


  </script>

  <script type="text/x-handlebars" data-template-name="components/search-box">
   <h2>{{name}}</h2>
   <p> State of the search box: {{searchBoxState}}</p>

  {{#if startSearchAllowed}}
      {{ view Ember.TextField valueBinding="queryText" }} <button {{action 'doSearch'}}>Search</button>
  {{else}}
    <button {{action 'searchAgain'}}>Search Again</button>
    <hr />
    Searching for {{queryText}}

  {{/if}}

  </script>

  <script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
  <script src="http://builds.emberjs.com/tags/v1.0.0/ember.min.js"></script>
  <script src="http://builds.emberjs.com/ember-states/latest/ember-states.js"></script>


</body>
</html>

## jsbin.URuSIWO.js
App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.IndexRoute = Ember.Route.extend({
  model: function() {
    return ['red', 'yellow', 'blue'];
  }
});

App.IndexController = Ember.Controller.extend({
  actions: {
    searchBackend: function(query) {
      console.log("App.IndexRoute searchBackend [%O] ", query);

    },
    alternateSearchBackend: function(query) {
      console.log("App.IndexRoute alternateSearchBackend [%O] ", query);
      alert("App.IndexRoute alternateSearchBackend: "  + query.value +"");

    }
  },

  allowSearchBehavior: false

});


App.SearchBoxComponent = Ember.Component.extend({
/*
// You can probably implement this without a statemachine
// But below is some possible statemachine code
    setupStateMachine: function(){
      var stateManager = Ember.StateManager.create({
        initialState: 'addQuery',
        addQuery: Ember.State.create(),
        findQuery: Ember.State.create(),
        foundQuery: Ember.State.create()
      });
      this.setProperties({  // more logic here
          searchSM: stateManager
      });
    }.on("init"),

    state: function(){
      return this.searchSM.get('currentState');

    }.property("queryText"),
*/
    searchBoxState: "searching has not started",
    startSearchAllowed: true,
    queryText: null,
    actions: {
        doSearch: function() {
          var query = {type: "text search", value: this.get('queryText') };
            this.set('startSearchAllowed', false);
            this.set('searchBoxState', 'already searching, new search not allowed');
            this.sendAction( 'searchFunction', query);
        },
        searchAgain: function() {
            this.set('startSearchAllowed', true);
            this.set('searchBoxState', 'new search allowed');
        }
    }

});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<meta charset="utf-8">
	<title>Ember Starter Kit</title>
	<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css">
	</head>
	<body>

	<script type="text/x-handlebars">
	<h2>Welcome to Ember.js</h2>

	{{outlet}}
	</script>

	<script type="text/x-handlebars" data-template-name="index">

	Is search allowed by controller: {{ allowSearchBehavior }}

	<hr />

	<ul>
	{{#each item in model}}
	<li>{{item}}</li>
	{{/each}}
	</ul>

	<hr />

	{{search-box name="Primary Search Box" searchFunction="searchBackend"}}

	<hr />

	{{search-box name="Alternate Search Box" searchFunction="alternateSearchBackend"}}

	<hr />

	{{search-box name="Search box gets it state from controller" searchFunction="alternateSearchBackend" startSearchAllowed=allowSearchBehavior }}


	</script>

	<script type="text/x-handlebars" data-template-name="components/search-box">
	<h2>{{name}}</h2>
	<p> State of the search box: {{searchBoxState}}</p>

	{{#if startSearchAllowed}}
	{{ view Ember.TextField valueBinding="queryText" }} <button {{action 'doSearch'}}>Search</button>
	{{else}}
	<button {{action 'searchAgain'}}>Search Again</button>
	<hr />
	Searching for {{queryText}}

	{{/if}}

	</script>

	<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
	<script src="http://builds.emberjs.com/tags/v1.0.0/ember.min.js"></script>
	<script src="http://builds.emberjs.com/ember-states/latest/ember-states.js"></script>


	</body>
	</html>
	App = Ember.Application.create();

	App.Router.map(function() {
	// put your routes here
	});

	App.IndexRoute = Ember.Route.extend({
	model: function() {
	return ['red', 'yellow', 'blue'];
	}
	});

	App.IndexController = Ember.Controller.extend({
	actions: {
	searchBackend: function(query) {
	console.log("App.IndexRoute searchBackend [%O] ", query);

	},
	alternateSearchBackend: function(query) {
	console.log("App.IndexRoute alternateSearchBackend [%O] ", query);
	alert("App.IndexRoute alternateSearchBackend: " + query.value +"");

	}
	},

	allowSearchBehavior: false

	});


	App.SearchBoxComponent = Ember.Component.extend({
	/*
	// You can probably implement this without a statemachine
	// But below is some possible statemachine code
	setupStateMachine: function(){
	var stateManager = Ember.StateManager.create({
	initialState: 'addQuery',
	addQuery: Ember.State.create(),
	findQuery: Ember.State.create(),
	foundQuery: Ember.State.create()
	});
	this.setProperties({ // more logic here
	searchSM: stateManager
	});
	}.on("init"),

	state: function(){
	return this.searchSM.get('currentState');

	}.property("queryText"),
	*/
	searchBoxState: "searching has not started",
	startSearchAllowed: true,
	queryText: null,
	actions: {
	doSearch: function() {
	var query = {type: "text search", value: this.get('queryText') };
	this.set('startSearchAllowed', false);
	this.set('searchBoxState', 'already searching, new search not allowed');
	this.sendAction( 'searchFunction', query);
	},
	searchAgain: function() {
	this.set('startSearchAllowed', true);
	this.set('searchBoxState', 'new search allowed');
	}
	}

	});