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.

    1 Like