Passing parameters when rendering a template in Ember.js

Is there a way to pass a parameter from a template to a controller or route in Ember?

<script type="text/x-handlebars" data-template-name="plan">
<table class="table table-bordered">
<thead>
<tr>
<th>Truck Number</th>
<th>Driver Name</th>
<th>Trip 1</th>
<th>Trip 2</th>
</tr>
</thead>
<tbody>
{{#each truck in model}}
<tr>
<td>{{truck.truckNumber}}</td>
<td>{{truck.driverName}}</td>
<td>{{render "plan.trip" truck.shipments trip=1}}</td>
<td>{{render "plan.trip" truck.shipments trip=2}}</td>
</tr>
{{/each}}
</tbody>
</table>
</script>

<script type="text/x-handlebars" data-template-name="plan/trip">
<ul>
{{#each shipment in tripShipment}}
<li>{{shipment.routeCode}}</li>
{{/each}}
</ul>
</script>

Trp.PlanTripController = Ember.ArrayController.extend({
    trip: '',
    tripShipment: function() {
        return this.filterBy('trip', this.get('trip'));
    }.property('@each.trip')
});

However, it seems that this.get('trip') is not functioning as expected. Is there a solution to render this template with the trip as a parameter?

Answer №1

To implement query-params in your template using a link-to helper, follow this example. In this scenario, trip is being used as a bound variable; however, you can also provide a specific value by putting it in quotes.

    {{#each vehicle in model}}
        <tr>
            <td>{{vehicle.vehicleNumber}}</td>
            <td>{{vehicle.driverName}}</td>
            <td>{{#link-to "vehicles" query-params=trip}}trip 1{{/link-to}}</td>
            <td>{{#link-to "vehicles" query-params=trip}}trip 2{/link-to}}</td>
        </tr>
    {{/each}}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Whenever I run "npm run build-dev" in Webpack with JavaScript, the browser continuously refreshes

I've been working on familiarizing myself with webpack lately. I've managed to convert everything to load modules and plugins, and it's all working fine when I use "npm run build-prod". Even when I use liveServer, the HTML loads properly. Ho ...

Error encountered in node.js script due to misuse of Sqlite's SQLITE_MISUSE functionality

Upon running my code with this query, I have encountered a situation where all tables are listed sometimes, while other times only one table is shown and consistently the following error is displayed: Query Error: Error: SQLITE_MISUSE: unknown error I ha ...

What is the best approach to extracting tightly-coupled code and converting it into an external library?

I have a question regarding paradigms that I would like to address, and if this is not the appropriate platform, please guide me to the right place. Your recommendations are most welcome :) Currently, I am tasked with extracting a significant piece of fun ...

The React DOM isn't updating even after the array property state has changed

This particular issue may be a common one for most, but I have exhausted all my options and that's why I am seeking help here. Within my React application, I have a functional component named App. The App component begins as follows: function App() ...

Switch between Fixed and Relative positions as you scroll

Just a small adjustment is needed to get it working... I need to toggle between fixed and relative positioning. JSFiddle Link $(window).on('scroll', function() { ($(window).scrollTop() > 50) ? ($('.me').addClass('fix ...

Updating the initialState in your application while employing the useState function with React Hooks

I'm currently facing an issue with updating the image value in the local state. Everything works fine initially, but once I return to the same page, the initialState seems to retain the previous value. To resolve this, I find myself having to assign t ...

Exploring the power of Lingui and yup validation within the NextJS framework

I'm using react-hook-form, yup in NextJS for form validation. I also implemented Lingui for internationalization by following this documentation. How can I set up internationalization in the yup validator that is supported by Lingui? The issue I am e ...

Steps for eliminating curly braces and renaming the key-value pairs in a JSON object

I have a JSON output that looks like this: { "intent": "P&P_Purchase", "value1": { "date1": "30-Dec-19", "prd_desc": "NEEM UREA OMIFCO (45 KG)", "qty": &quo ...

Updating the $location variable from the $rootScope perspective

I am facing an issue with my web app which is built using AngularJS. I have two functions in my code - one declared on the $rootScope and the other on the $scope. The code snippets are shown below: app.js app.run(function ($rootScope, $location) { $roo ...

Transform JSON data into a Google Sheet using Google Apps Script

Having trouble inserting the JSON response into Google Sheet using Google Apps Script with the code below. Running into errors, even though I can't seem to pinpoint the issue. Take a look at the screenshot and code snippet provided: function myF ...

When comparing object strings, it is important to consider the differences between stringifying identity operators

While working on a reactjs component, my colleague encountered an issue with identity operators and JSON.stringify(). I was puzzled as to why he used stringify in the code, but what really confused me was why the if/else blocks were not functioning properl ...

ngPrime table column selection and data extraction

I am looking to extract multiple columns from a table. Can anyone suggest the best approach for this? Does NGPrime offer any functionality for achieving this task? Appreciate your help! ...

Issue with an unknown cause (AJAX / GET)

Let's break it down, here's the code I'm working with. It's meant to update the "like" column in my "comments" table. The issue arises when trying to submit the result in JavaScript. There's a SPAN containing a link to submit: &l ...

Why is the promise not returning an integer value, but instead returning undefined?

My validation process includes checking the integrity of the down streaming data to the server and verifying its existence in the database. The code snippet from model.js: const mongoose = require('mongoose'); const User = new mongoose.Schema({ ...

Adjusting the PHP variable value using an onclick event

I am facing a challenge with increasing a variable $count = 10; every time a user clicks on the <a id="load-more" href="#">Load more</a> Despite trying various methods such as onclick, variable equations, and functions, I have been unsuccessfu ...

Modify the colors of <a> elements with JavaScript

I am brand new to the world of UI design. I am encountering an issue with a static HTML page. (Please note that we are not utilizing any JavaScript frameworks in my project. Please provide assistance using pure JavaScript code) What I would like to achie ...

DataTables - Tabletools not defined after a postback event

I'm working on an asp.net website that includes a datatable to store various items. However, whenever I try to do a postback, I encounter the following error: Alert: TableTools 2 needs DataTables version 1.9.0 or higher - etc.. Error message in co ...

Discovering the presence of a NAN value within a JSON string

Consider the following scenario: I have a function that receives jsonData in JSON format, and I want to validate the variable jsonData to check for NaN. How can I achieve this? function save() { var jsonData = getEnteredValue(); $.ajax({ ...

How to handle an unexpected keyword 'true' error when using the `useState` hook in React?

Trying to set the open prop of the MUIDrawer component to true on user click is causing an error stating "Unexpected keyword 'true'" import React, { useState } from "react"; import { withRouter } from "react-router-dom"; impo ...

Using iMacros to assign a variable the value of another variable

Running an imacro to automate the addition of sub-domain DNS records through the 123reg front end has presented some challenges due to my specific naming convention. I am mapping two sets of domains as follows: - x.x.x.1 to x.x.x.128 on domain1.com - x.x. ...