I am trying to use collection firs item property in another each but it does not work,it does not give any error but also it does not work
Bagaj not work but
Bagaj1 work,altough it is same code,what is problem with this ?
{{#each Flights}}
<tr>
<td>
<div class="col-md-10">
<strong><span data-i18n="app.booking.flight-number"></span></strong>{{FlightNumber}}
<strong>Bagaj:</strong>{{PassengerPricing.0.BaggageDescription}}
</div>
</td>
</tr>
{{/each}}
<strong>Bagaj1:</strong>{{PassengerPricing.0.BaggageDescription}}
Related
I'm fairly new to meteor and I'm trying to iterate over a cursor using #each to populate a table. Here's my code:
<template name="choral">
<div class="container" style="padding-top: 25px">
<div class="table-responsive">
<form id="orderForm">
<table class="table table-borderless table-dark">
<thead class="thead-light">
<tr>
<th>Title:</th>
<th>See the Music:</th>
<th>Hear the Music:</th>
<th>Format:</th>
<th>Price (per copy):</th>
<th>Quantity:</th>
</tr>
</thead>
<tbody>
{{#each piece in pieces}}
<tr>
<td id="name">{{piece.name}}</td>
<td id="pdf">PDF</td>
<td id="audio">AUDIO</td>
<td id="format">FORMAT</td>
<td id="price">{{piece.score}}</td>
<td id="qty"><input type ="number" name ="quantity" min="5"></td>
</tr>
{{/each}}
</tbody>
<tfoot>
<tr>
<td colspan="5"></td>
<td><button class="button" type ="submit">Add to Cart</button></td>
</tr>
</tfoot>
</table>
</form>
</div>
</div>
my js.
Template.choral.helpers({
pieces: function(){
return choralm.find({});
}
});
I'm outputting a blank row between the #each tag. I publish the collection server side and subscribe. I'm just not sure where to look. Any ideas?
My publishment and subscription:
Meteor.publish('choralList', function() {
return choralm.find();
});
Template.choral.onCreated( function(){
Meteor.subscribe('choralList');
});
As far as I can see you are subscribing to your data but you are not "telling" your template, that the subscription is finished and it should redraw.
Therefore your template immediately renders while the subscription is ongoing and thus uses the yet empty collection data.
In order to inform your template that data has been updated you can use it's internal Tracker and store the information in a reactive data-source (for my example I use ReactiveDict instead of ReactiveVar).
import { ReactiveDict } from 'meteor/reactive-dict';
Template.choral.onCreated( function (){
// inside onCreated, this refers to the
// current template instance
const instance = this;
// let's attach a ReactiveDict to the instance
instance.state = new ReactiveDict();
// use the internal Tracker
instance.autorun(() => {
// subscribe and store a flag, once ready
const choralListSub = Meteor.subscribe('choralList');
if (choralListSub.ready()) {
instance.state.set('subscriptionComplete', true);
}
});
});
Next you add a helper, that returns the reactive value for 'subscriptionComplete':
Template.choral.helpers({
pieces(){
return choralm.find({});
},
subscriptionComplete() {
// we use 'state', our ReactiveDict,
// which we added as prop in onCreated
return Template.instance().state.get('subscriptionComplete');
}
});
And finally we let our template draw the data, once our subscription is complete. Until the subscription is complete (note the {{else}} block), we display a message about the loading status:
<template name="choral">
<div class="container" style="padding-top: 25px">
{{#if subscriptionComplete}}
<div class="table-responsive">
<form id="orderForm">
<table class="table table-borderless table-dark">
<thead class="thead-light">
<tr>
<th>Title:</th>
<th>See the Music:</th>
<th>Hear the Music:</th>
<th>Format:</th>
<th>Price (per copy):</th>
<th>Quantity:</th>
</tr>
</thead>
<tbody>
{{#each piece in pieces}}
<tr>
<td id="name">{{piece.name}}</td>
<td id="pdf">PDF</td>
<td id="audio">AUDIO</td>
<td id="format">FORMAT</td>
<td id="price">{{piece.score}}</td>
<td id="qty"><input type ="number" name ="quantity" min="5"></td>
</tr>
{{/each}}
</tbody>
<tfoot>
<tr>
<td colspan="5"></td>
<td><button class="button" type ="submit">Add to Cart</button></td>
</tr>
</tfoot>
</table>
</form>
</div>
{{else}}
<div>Loading template...</div>
{{/if}}
</div>
</template>
Related resources
TemplateInstance.autorun
http://blazejs.org/api/templates.html#Blaze-TemplateInstance-autorun
https://docs.meteor.com/api/tracker.html
Reactive stores
https://guide.meteor.com/data-loading.html#stores
Subscription readyness
https://guide.meteor.com/data-loading.html#readiness
Helpers
http://blazejs.org/guide/spacebars.html#Built-in-Block-Helpers
I have a treeview where you click fa-plus-square-o and when it expands fa-minus-square-o shows.
I am using ng-class to show them. What I need to do is change that fa-minus-square-o color to white. However, I do have another page with the same type of treeview. So referencing the fa-minus-square-o directly in the CSS WORKS, but also "changes" the one on the other page. So, I cant do this!!!!. I need it to only affect the current one on that pages treeview.
HTML Table Treeview
<table class="users-tree-view-table">
<tbody class="users-tree-view-tbody">
<tr ng-repeat="user in users" ng-class="{selectedUserRole: user === selectedUser}">
<td class="users-tree-view-column">
<div class="users-tree-view-row">
<span class="fa users-tree-view-toggle" ng-class="{'fa-plus-square-o' : user.isUserCollapsed, 'fa-minus-square-o' : !user.isUserCollapsed}" ng-click="clickedUserNode(user); user.isUserCollapsed = !user.isUserCollapsed"></span>
{{user.userName}}
</div>
<div uib-collapse="user.isUserCollapsed">
<table class="users-tree-view-subtable">
<tbody class="users-tree-view-tbody">
<tr id="role-{{$index}}" ng-repeat="role in user.userRoles" ng-click="setSelectedUserRole(user, role)" ng-class="{true: 'selectedUserRole', false: 'unselectedUserRole'}[user === selectedUser && role === selectedRole]">
<td class="users-tree-view-column">
<div >
<div class="users-tree-view-row">
<span style="padding-left:45px">{{role}}</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Hovering over the fa-minus-square-o I see I need to reference fa users-tree-view-toggle fa-minus-square-o somehow in the CSS?
How can I reference that one particular font awesome without affecting all the other font awesome on other pages?
My purpose is to display a table with the leftmost column containing course title at a college, and the rest of the row information regarding textbooks to that course.
This is what it looks like now:
current table
Here is an image of what I would like to happen:
Textbook information
Here is my code for what I have now.
{{#each getCourses}}
<tr>
<td>{{this}}</td>
{{#each getTextbooks this}}
<td>
{{title}}
<br>
</td>
<td>Editor</td>
<td><span class="label label-success">Active</span>
</td>
<td> <button type="button" class="btn btn-primary btn-sm">I have it</button> </td>
<td> <button type="button" class="btn btn-primary btn-sm">I want it</button> </td>
{{/each}}
</tr>
{{/each}}
Before this table, a user is able to select several courses from a dropdown, and then I store the courses in a session and get them and iterate. Each course has textbooks, so I iterate over the list of textbooks. However the problem I face is that I'm not sure how to incorporate rowspan or something like that to allow multiple rows of textbook information for each class.
I've understood the routing principle consisting in creating routes and call them from twig templates.
When calling, we can pass parameters to the route which will be included in the url.
I'm in the following case, I have an object called "Object" and each object can belong to other objects called "Category".
In my twig template, I display all my objects line by line (each row contains the object information and a checkbox to select it).
I have also a button "send", I'd like to click this button and edit all the selected objects.
However I don't think I can do this with a route because I don't know by advance how many elements will be selected (so I don't know the number of parameters to the route).
I'd like to know how you would do this.
Sorry for the tardive response, I have the following code in my twig tempalte :
<table class="table table-bordered table-condensed table-stripped">
<tr>
<td> Delete </td>
<td> Title </td>
<td> Date added </td>
<td> Description </td>
<td> </td>
</tr>
{% for link in links %}
<tr>
<td>
<a class="btn" href="{{ path('ProjectTestBundle_deleteLink', {'idLink': link.id}) }}"><i class="icon-trash"></i></a>
</td>
<td> <a>{{link.title}}</a> </td>
<td> {{link.dateAjout|date('Y-m-d H:i:s')}} </td>
<td> {{link.description}} </td>
<td>
<input id="{{link.id}}" type="checkbox"">
</td>
</tr>
{% endfor %}
</table>
<a class="btn">
<i class="icon-edit"></i>
Add selected links to a theme
</a>
What I'd like to is to put a href attribute there
<a href="" class="btn">
<i class="icon-edit"></i>
Add selected links to a theme
</a>
and call a path with all the links selected with the checkbox.
I am all new to Durandal and have been playing around with it for a few hours now. It seems very promising - but now I have run into a problem, I cannot figure out - and cannot find a solution with Google.
I have a view with three tables of data - creditCardLines, cashLines and drivingReimbursementLines. They fetch data from three different data sources - and the user can add new lines to cashLines and drivingReimbursementLines (left out the forms).
Problem: In the viewmodel, I can easily bind a list for data to the first foreach - but I cannot figure out how to bind data to the second and third.
In the activate function I make an ajax call to my server API to get the data for the first foreach - and then returns the promise, when this finishes. How do I get data for the second and third foreach here?
ViewModel:
define(function () {
var submit = function () {
this.displayName = 'Expenses';
this.creditCardLines = ko.observableArray();
var me = this;
this.activate = function () {
return $.get('/submit/GetCreditCardLines').then(function (creditCardLines) {
me.creditCardLines(creditCardLines.Data);
});
};
};
return submit;
});
View:
<section>
<h2 data-bind="html:displayName"></h2>
<h3>CreditCard lines</h3>
<table class="table">
<tbody data-bind="foreach: creditCardLines">
<tr>
<td class="date" data-bind="text: Date"></td>
<td data-bind="text: Description"></td>
<td data-bind="text: Amount"></td>
<td><input type="checkbox" data-bind="checked: ApprovedEmployee" /></td>
</tr>
</tbody>
</table>
<h3>Cash lines</h3>
<table class="table">
<tbody data-bind="foreach: cashLines">
<tr>
<td class="date" data-bind="text: Date"></td>
<td data-bind="text: Description"></td>
<td data-bind="text: Amount"></td>
</tr>
</tbody>
</table>
<!-- TODO: Generate form to add new lines -->
<h3>Driving reimbursement lines</h3>
<table class="table">
<tbody data-bind="foreach: drivingReimbursementLines">
<tr>
<td class="date" data-bind="text: Date"></td>
<td data-bind="text: Description"></td>
<td data-bind="text: Distance"></td>
<td data-bind="text: Rate"></td>
<td data-bind="text: Amount"></td>
</tr>
</tbody>
</table>
<!-- TODO: Generate form to add new lines -->
<!-- Approve and save all lines as a quote with lines -->
<input type="submit" value="Submit quote" />
</section>
This is how I've been dealing with multiple jQuery deferred calls in my view models:
return $.when(
$.get('/submit/GetCreditCardLines'),
$.get('/submit/GetCashLines'),
$.get('/submit/GetReimbursementLines'))
.then(function (creditCardLines, cashLines, reimbursementLines)
{
processCreditCardLines(creditCardLines);
processCashLines(cashLines);
processReimbursementLines(reimbursementLines);
})
.fail(function (status)
{
// Do whatever you need to if it fails
});
You don't need the process methods if you don't want them, but if you're doing anything complicated, I think it's neater to have them.
You should check out BreezeJS. It has an option to make a single Ajax call to pull multiple lookups.
Take a look at the BreezeJS docs for a detailed explanation: http://www.breezejs.com/documentation/lookup-lists