How to set action?

Learning Team
1

I have created this but i don’t know how can i give action to each links. When i click on BreakFast, it should only show me 3 search box(BreadType, cheeseType and meatType) only and other should hide. same for Lunch and Drinks. i have also created route for menu in router.

752×302 15 KB

--------------/////application.hbs

 <h1>Welcome!!</h1>
     {{#link-to 'menu'}}BreakFast{{/link-to}}
     {{#link-to 'menu'}}Lunch{{/link-to}}
     {{#link-to 'menu'}}Drinks{{/link-to}}
    {{outlet}}

-------------/////menu.hbs

<div>
    	<p>Hello from BreakFast</p>
    	<label>
    		Bread Type:{{input value=bread}}
    		Cheese Type:{{input value=cheese}}
    		Meat Type:{{input value=meat}}
    	</label>
    </div>
<div>
	<p>Hello from Lunch</p>
	<label>
		Calories:{{input value=cal}}
		Price:{{input value=price}}
		Veg/Non-veg:
		<select>
			<option>V</option>
			<option>N</option>
		</select>
	</label>
</div>
<div>
	<p>Hello from Drinks</p>
	<label>
		Drink Name:{{input value=name}}
		Price :{{input value=price}}
		Ice: <select><option>Y</option>
					<option>N</option>
			</select>
	</label>
</div>
2

This is simple.

paramquery example

{{#link-to 'menu' (queryparams type='breakfast') }}BreakFast{{/link-to}}

then your controller could use that in some {#if } or

subroute example

add some subroute to each type

{{#link-to 'menu.breakfast' }}BreakFast{{/link-to}}
3

Thanks :slight_smile: i like to use queryparams. Here is my code where i tried to use but i am getting an error.

application.hbs

<h1>Welcome!!</h1>

{{#link-to 'menu' BreakFast (queryparams type='breakfast') }}BreakFast{{/link-to}}
{{#link-to 'menu' Lunch (queryparams type='lunch') }}Lunch{{/link-to}}
{{#link-to 'menu' Drinks (queryparams type='drinks') }}Drinks{{/link-to}}

{{outlet}}

menu.js

import Ember from 'ember';
queryparams : [type],

export default Ember.Controller.extend({
	if('breakfast'){
		BreakFast:true
	}
	else if('lunch'){
		Lunch:true
	}
	else if('drinks'){
		Drinks:true
	}

});

menu.hbs

{{#if BreakFast}}
<div>
    <p>Hello from BreakFast</p>
      	<label>
        		Bread Type:{{input value=bread}}
        		Cheese Type:{{input value=cheese}}
        		Meat Type:{{input value=meat}}
        	</label>

{{else if Lunch}}

<div>
	<p>Hello from Lunch</p>
	<label>
		Calories:{{input value=cal}}
		Price:{{input value=price}}
		Veg/Non-veg:
		<select>
			<option>V</option>
			<option>N</option>
		</select>
	</label>
</div>

{{else if Drinks}}

<div>
	<p>Hello from Drinks</p>
	<label>
		Drink Name:{{input value=name}}
		Price :{{input value=price}}
		Ice: <select><option>Y</option>
					<option>N</option>
			</select>
	</label>
</div>
{{/if}}

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('menu');
});

export default Router;