Suppose I have the following partial template:
<script type="text/x-handlebars" data-template-name="_folderList">
<table id="folder-list">
<thead>
<tr class="PLEASE_MAKE_ME_ACTIVE_IF_SELECTED_ROW">
<th>Name</th>
<th>Date Created</th>
</tr>
</thead>
<tbody>
{{#each folder in controller}}
<tr>
<td>
{{#linkTo "folder" folder }}
<i class="icon-folder-close"></i> {{ folder.folder_name }}
{{/linkTo}}
</td>
<td style="padding-left: 15px;">
{{ prettyDate folder.created_date}}
</td>
</tr>
{{/each}}
</tbody>
</table>
</script>
Notice the class I've added to the table row element. How can I add an "active" class to this row when it's child link is the active link? Ember automatically adds the active link when the current route matches the element in the collection. I'm trying to find the elegant, "Ember way" of doing this without resorting to jQuery hacks.
While I'd still like to see an answer to the question as I originally stated it, the workaround I went with for now is not to use tables at all. I'm already using Bootstrap based CSS layouts for the rest of my site, so I decided to use a fluid layout instead of tables:
<script type="text/x-handlebars" data-template-name="_folderList">
<div id="folder-list">
<div class="container-fluid list-header">
<div class="row-fluid">
<div class="span5">Name</div>
<div class="span7">Date Created</div>
</div>
</div>
{{#each folder in controller}}
{{#linkTo "folder" folder }}
<div class="container-fluid list-item">
<div class="row-fluid">
<div class="span5">
<i class="icon-folder-close"></i> {{ folder.folder_name }}
</div>
<div class="span7">
{{ prettyDate folder.created_date}}
</div>
</div>
</div>
{{/linkTo}}
{{/each}}
</div>
</script>
This allows me to wrap the whole "row" with the anchor using {{#linkTo}} and style the whole row accordingly.
You can use bindAttr to toggle the classname. For example if you hold the state in an isSelected property in your controller then in the template.
<tr {{bindAttr class='isSelected:active'}}>
Where active is the css class name.
Related
I'm trying to access data two times in my template, once on a list view, and once in a modal view. Upon clicking on the image, the modal will display a lot of the same data, just blown up. I'm having issues. The modal seems to be taking the last set of data, even though it's nested in the each statement. Any ideas? Here's my code...
<div class="row">
{{#each model.products as |product|}}
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="shopify-grid-wrapper">
<div id="#image-wrapper" class="image-wrapper" {{action 'openModal'}}>
<div class="img-overlay">
<p>
Click for More Details
</p>
</div>
{{#each product.images as |image|}}
<img src= {{image.src}} />
{{/each}}
</div>
<div class="description-wrapper">
<span><p>{{product.title}}</p></span>
<p>
{{product.productType}}
</p>
<p>
{{product.tags}}
</p>
</div>
</div>
</div>
{{#if shopifyModal}}
{{#liquid-wormhole class="fullscreen-modal" }}
<div class="left-side">
{{selectedProduct.title}}
</div>
<div class="right-side">
{{buy-button product=product.attrs open="openCart"}}
<div class="Cart {{if model.isCartOpen "Cart--open"}}">
{{shopify-cart close="closeCart"}}
</div>
<p {{action 'closeModal'}}>
Close
</p>
</div>
{{/liquid-wormhole}}
{{/if}}
{{/each}}
</div>
The problem was answered in the comments, but I'm adding this here in case someone finds it.
When looping over a collection in a template, if you have an action inside that loop, you must pass some information to the action handler if you expect the "current" item to be processed by the action handler, like this:
{{action 'openModal' product}}
I'm trying to change the interaction of a page so that additional info about a product appears in a modal rather than an element that is shown/hidden when a button is clicked.
The bit I'm not sure about is making the modal adapt it's contents to each product. (I'm not sure if django must prepare 3 different modals first of all at the backend - if this is possible or whether there is a simpler way?)
Previously I had the template:
<div class="item price-2 col-md-4 col-12 text-center best-buy">
<div class="item-inner">
<div class="heading">
<h3 class="title"><b>Cheapest</b></h3>
</div>
{% include 'components/quote_summary_item.html' with quote=first_quote %}
</div><!--//item-inner-->
</div><!--//item-->
{% include 'components/quote_detail.html' with quote=first_quote %}
Where quote_summary_item.html is:
<div>
<div class="quotes-summary"><img src="{{ quote.ImageUrl }}" alt=""></div>
<p></p>
<p >.........
</p>
<a class="btn btn-quote-primary" href="{% url 'users:profile %}">Select</a></div>
<div class="content">
<p><b>Your Quote Details</b></p>
<p>{{ quote.Name }}<br/>
{{ quote.Type }} <br/>
.....
</p>
<button class="btn btn-cta-secondary" data-id="{{ quote.priceId }}">Info</button>
</div><!--//content-->
and quote_detail is:
<div class="quote" id="quote{{ quote.priceId }}" style="display:none">
<div >
<p><b>About this quote:</b></p>
{{ quote.synopsisText|safe }}
</div>
<div class="row">
<div class="col">
<table class="table">
<thead class="til-table-head">
<tr>
<th>Information</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>{{ quote.Something }}</td>
</tr>
<tr>
<td>Name</td>
<td>{{ quote.Name }}</td>
</tr>
<tr>
<td></td>
<td>{{ quote.payType }}</td>
</tr>
.......
</tbody>
</table>
</div>
</div>
</div>
And the .js used was:
<script type="text/javascript">
$(document).ready(function () {
$('.btn-cta-secondary').click(function (e) {
var id = $(e.currentTarget).data('id')
$('.quote').hide()
$('#quote' + id).show()
})
})
</script>
I've set up a modal template wrapper around quotes_detail.html however I'm not sure how to change the .js needed to pass in the relevant quote data to something like:
{% include 'components/quotes_modal.html' with quote=my_quote %}
and pass in the relevant quote based on the button id clicked.
There are two decent ways to do this. Implement multiple modals if there aren't too many of them or use ajax to retrieve the contents if there are lots of them.
There is no need to have a .js file as all the required js is built into bootstrap.
Control each modal with eg a button:
<button type="button" class="btn btn-cta-secondary" data-toggle="modal" data-target="#{{ quote.priceId }}" data-id="{{ quote.priceId }}">More Info</button>
Then include the modal template in the relevant page:
{% include 'components/quote_detail.html' with quote=second_quote %}
{% include 'components/quote_detail.html' with quote=first_quote %}
with components/quote_details.html
<div class="modal fade" id="{{ quote.priceId }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
.....
with the rest as per bootstrap docs.
To do this via ajax have a look at https://www.abidibo.net/blog/2015/11/18/modal-django-forms-bootstrap-4/
I'm using Django with Bootstrap and have a problem with a modal window. I have a table and within that I have one column where the cell is a link to the modal window. The modal window should then display another table relevant to the cell you selected.
The problem is I'm trying to keep the modal div inside of a for loop because that's how I am determining which row of the table has been clicked. I've read a little on modals and seen other people have a problem when their modal div was inside table tags, so I think that's where my issue might be coming from.
At the moment, the main table displays properly and the modal window opens when i click on the cell as intended. It takes the information from the for loop properly.
However, when I put a table within the modal div it doesn't display in the modal window, it displays underneath the main table whether the modal has been activated or not. The modal window then only displays the header and footer with an empty body. If I get rid of the table inside the modal and use something like p's instead it works but I would prefer to use the table.
If I move the modal div outside of where it is then it works with the table in the modal window, but the problem is I need it within the for loop because that's how I know which row of the table has been clicked.
Can anyone tell me if there is a better way of doing this than what I am doing, like passing a variable based on which row has been picked if possible, or if there is a way to keep the modal div where it is and still display the table in the modal window?
The HTML is below.
<table class="weekly table-hover main-manager-display" style="text-align: center; width: 100%">
<thead>
</thead>
<tbody style="color: white">
{% for week in team_selection %}
<tr>
{% for item in week|slice:":10" %}
<td>{{ item }}</td>
{% endfor %}
<td><a data-toggle="modal" href="#maxModal" style="color: white">{{ week.10 }}</a></td>
<td>{{ week.11 }}</td>
</tr>
<div class="modal fade" id="maxModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content" style="background-color: #c4dfe6">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="text-align: center; color: #1c4d66">Week {{ week.0 }} Best Possible Team</h4>
</div>
<div class="modal-body">
<table class="table modal-table">
<thead>
<tr>
<th>Position</th>
<th>Player</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn" data-dismiss="modal" style="background-color: #c4dfe6; color: #1c4d66">Close</button>
</div>
</div>
</div>
</div>
{% endfor %}
</tbody>
</table>
For future reference, I got this to work by using the code below as an alternative to the <table> tag.
<style>
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
}
</style
<div class="modal-body">
<div class="table">
<div class="row">
<div class="cell"></div>
</div>
</div>
</div>
I have the following code for generating links to objects and I have a template that renders it but I would like to have each item in the list call either a different template or display different items. Is this possible?
<div class="main-content container">
<div class="container-fluid">
<div class="col-xs-3">
<div class="span3">
<table class='table'>
<thead>
<tr><th><h3>Select Your Source</h3></th></tr>
{{#each refRecord in model}}
<tr><td>
{{#link-to 'ref' refRecord classNames="fullwidth"}}{{refRecord.type}}{{/link-to}}
</td></tr>
{{/each}}
</table>
</div>
</div>
<div class="col-xs-9">
{{outlet}}
</div>
</div>
</div>
I'm not sure if I've understood correctly, but I took your question in two ways, either they link to a different template, or they render each item different in the list.
Link to different templates
You can create dynamic link-to using a property instead of a string in the link-to statement.
<ul>
{{#each item in model}}
<li>{{#link-to item.template item}}{{item.color}}{{/link-to}}</li>
{{/each}}
</ul>
http://emberjs.jsbin.com/xarixiyu/1/edit
Render each item different
This is a bit different since render doesn't allow taking a property and resolving the name dynamically. But you can still use an if statement and render different items differently.
{{#each item in model}}
<li>
{{#if item.foo}}
{{render 'foo' item}}
{{/if}}
{{#if item.bar}}
{{render 'bar' item}}
{{/if}}
</li>
{{/each}}
http://emberjs.jsbin.com/xarixiyu/2/edit
<a class="btn btn-primary" href="#" {{action "toggleStatus"}}><i class="icon-plus icon-white"></i> Add Staff</a>
This is in a view template called stafflist.handlebars. The content is as follows
<div class="page-header">
<h3>{{staff.title}} <small>List of users who has access to this application</small></h3>
</div>
<div class="commands pull-right">
sta
<a class="btn btn-primary" href="#" {{action "toggleStatus"}}><i class="icon-user icon-white"></i> {{staff.btnTitle}}</a>
</div>
<div class="pull-left">
<input type="text" class="search-query" placeholder="Search">
</div>
<table class="table table-striped table-bordered">
<thead>
<tr>
<td>NAME</td>
<td>ID</td>
</tr>
<thead>
<tbody>
{{#each staff}}
<tr>
<td>{{this.fname}}</td>
<td>{{this.id}}</td>
</tr>
{{/each}}
</tbody>
</table>
The View file is as below
App.StaffListView = Em.View.extend({
templateName:'sellap-web/~templates/stafflist',
staffBinding:'App.staffController',
toggleStatus: function() {
alert('Hurray');
}
});
When clicking the button, the action is never calling the alert. What is going wrong here. I am using ember-skeleton to compile.
Found the culprit. My App.create has a method called init. I changed the name to something else and now it works fine. I didnt call the super.