Before routing get <li> tag value


#1

I have following handlebar template:

<div class="navbar">
    <ul>
      <li value="123">{{#link-to 'resultData'}}Home{{/link-to}}</li>
      <li value="124">{{#link-to 'resultData'}}About{{/link-to}}</li>
	  <li value="125">{{#link-to 'resultData'}}abc{{/link-to}}</li>
      <li value="126">{{#link-to 'resultData'}}pqr{{/link-to}}</li>
	  <li value="127">{{#link-to 'resultData'}}xyz{{/link-to}}</li>
    </ul>
</div>

Before redirecting to “resultData” template I want which li value is selected by user i.e if user has click on about

  • then I want value= 124 and name = About. After getting this then we want to redirect to “resultData” template because these above selected value I want to pass as parameter in model function of “resultData” template

  • #2

    I think the key here is to not put the value data in your UI, put it in a js object instead, that way it’ll be easy to grab it.


    #3

    Hi Jurre,

    Can you explain by giving example?

    Thank you so much for your reply


    #4

    Since you need custom behavior, don’t use a link, use an action.

    <div class="navbar">
        <ul>
            <li>
                <a {{action 'goToResultData' 123 on='click' bubbles=false}}>Home</a>
            </li>
            <li>
                <a {{action 'goToResultData' 124 on='click' bubbles=false}}>About</a>
            </li>
        </ul>
    </div>
    

    Then, in your controller:

    actions: {
        goToResultData: function(value) {
            // Do what you want with `value`,
            // which is the number given in the action declaration
    
            this.transitionToRoute('resultData');
        }
    }
    

    This will allow you to do any processing you want before you redirect.