I've got my pages correctly pulling in partials and sources but I can't seem to get something resembling a navigation to work using the {{#each pages}} logic.
I am trying to gather up all my pages and output them as a unordered list.
{{#each pages }}
<li>{{basename }}</li>
{{/each}}
I thought I was following 0.6.0 methodology:
gulp.task('assemble', function () {
assemble.layouts('./templates/layouts/*.hbs');
assemble.option({
layout: 'default'
});
gulp.src('./src/hbs/components/**/*.hbs')
.pipe(gulpAssemble(assemble))
.pipe(prettify())
.pipe(extname())
.pipe(gulp.dest('./dist'));
});
Again, everything else seems to work. I don't understand where the "pages" object that #each is iterating over comes from. I've used {{#log this}} and I can see the the "basename" object but I don't see the "name" object.
Related
I use itextsharp & mvcrazortopdf to generate pdfs in azure websites. nested lists in div tags or table cell cannot be rendered correctly - they become one single line. here is a example:
<div>
<ul>
<li>
test1
<ul>
<li>test1.1</li>
</ul>
</li>
<li>test2</li>
</ul>
</div>
http://demo.itextsupport.com/xmlworker/
in the demo page it is rendered as:
test1 test1.1
test2
Any help is appreciated!
With the help of a coworker, we managed to create a workaround for nested lists inside a table cell. It involves surrounding the list with <div> tags, and they will render correctly.
For instance, in the web application I'm developing, there are several Razor Views that we convert to PDF. As these views are completed with data from the database, we allow users to fill some fields in other forms with rich-text controls. As a result, we can encounter any kind of styles and combination of lists.
The mentioned reports are similar in structure, so we have many tables within tables. In the last level of tables, we have the "troublesome" cells, which are filled with the rich-text fields from the database. Inside each cell, we put the <div> tags like this:
<tr>
<td class="border3 fontMedium">
<div>
#if (!String.IsNullOrEmpty(entity.Field))
{
<p class="fontSmall">#Html.Raw(entity.Field)</p>
}
else
{
<p> </p>
}
</div>
</td>
</tr>
Please note that the mentioned <div> does not need to have any CSS class associated. The other CSS classes you see in the code snippet belong to the styling of the reports; and they involve borders, paddings and so on.
Hope that helps.
I'm working on the simple Meteor Chat application. I have two different collections, textMessages and FS.images. I need to display those element based on time in one flow. Now I submit them both apart from each other and can't figure the way, while looping over them using #each handler.
Template code :
<ul class="list-group">
{{#each messages}}
<li class="list-group-item">
<span class="badge">x</span>
UserN: {{text}}
</li>
{{/each}}
</ul>
<ul class="list-group">
{{#each showImages}}
{{#unless this.isUploaded}}
{{> FS.UploadProgressBar bootstrap=true}}
{{/unless}}
{{> imageItem}}
{{/each}}
</ul>
You can create a helper in the template that would combine both collections results and sort them by date if each user has set of images and text.
If each message has a set of images you can use this package for creating helper for the collection in such a way you can get the set of images for a certain message.
meteor-collection-helpers
I just started use meteor about a week ago, and I'm trying to write my first app for logging time for a project.
At the end of the day users can go in and log their hours with a single row consisting of 2 drop down select menus. First is the clients drop down. then based on that client (using Session) the 2nd drop down for client projects will auto-populate, and finally allowing you to enter your hours in a text input.
I have this working, but I also need to implement a button so you can add multiple rows at once. Sort of like jQuery Clone() in case the user worked on different clients or client projects.
I tried to re-render the row once newRow is clicked, but then the second row manipulates the first row because I'm assuming they're both referencing the same template.
To simplify? 1) How do I duplicate the below the last one, and 2) How do I use the same template for 1 or more rows and have them not affect each other?
Any thoughts/help is welcome
<form id="add_time">
<template name="row">
<ul>
{{> clientsDD}}
{{> projectsDD}}
{{> hoursAndTasks}}
</ul>
</template>
<p>Add another row
<input type="submit" id="submit_hours" value="Submit"/>
</form>
Template.clientsDD.clients = function() {
return Clients.find({});
}
Template.projectsDD.projects = function(event) {
return Projects.find({"client.clientId" : Session.get("clientSelected")});
}
Template.addHours.events({
'change select[name="clientsDD"]' : function(event){
newClient = $(event.target).val();
Session.set("clientSelected", newClient);
},
'change select[name="projectsDD"]' : function(event){
newProject = $(event.target).val();
}
});
There are two ways in my mind this can be done. As Meteor doesn't require page reloads to update your content. There is nothing to stop you have the row save on completion and then just having a loop which populates the page. Your form becomes something like this:
<form id="add_time">
{{#each rows}}
{{> row}}
{{/each}}
{{> row}}
<input type="submit" id="submit_hours" value="Save and Add Another"/>
<input type="button" id="submit_and_exit" value="Save and Exit"/>
</form>
<template name="row">
<ul>
{{> clientsDD _id}}
{{> projectsDD _id}}
{{> hoursAndTasks _id}}
</ul>
</template>
This would loop through a rows helper which contains your hours data displaying it for editing along with providing a new empty row. This would automatically update on save with no need for any DOM manipulation.
The other option is to duplicate the fields. I'm not aware of a method that allows you to duplicate a template but there's no reason why jQuery clone type function wouldn't work however you'd need to make sure that on saving they are saved separately. clientsDD[] as the input names should be okay as long as you give each group of fields a unique id.
I would personally use the first method thou as IMHO this is the way Meteor is designed to work so you don't have the need to manipulate the DOM as it will seamlessly update with the data store.
This application is for running a writing contest.
Coodinators are assigning entries to judges for them to judge. I have three sets of data I retrieve from the server, a judge list, an entries list and an assignment list that ties the two together. There can be a variable number of input fields...if a judge has agreed to judge 4 entries, there will be 4 inputs...if 7, then 7.
I have all of that working OK, but only insofar as the entry number can be input and the data updated.
Now I would like confirm that the entryID IS a valid ID by checking the list and also to show a field or two on the screen so the coordinator knows that they typed in the right entry.
The relevant section of the HTML
<div ng-app>
<div id="assignment" ng-controller="AssignData" ng-init="JudgeID=107;CategorySelect='MS';PublishSelect='P'">
<div ng-show="loaded">
<form class="entryform ng-cloak" name="assignform" ng-submit="sendForm()">
<p>Entry numbers assigned to this judge</p>
<p ng-repeat="assign in (formassigns =(assigns | filter:AssignedJudge))">
<input type="text" ng-model="assign.entryid" required/>
{{entries.authorname}} {{entries.entrytitle}}
</p>
<button type="submit">Save Assignments</button>
<p>This will keep the assignments attached to this judge.
You will be able to send all of your assignments to all
of your judges when you are finished.</p>
</form>
</div>
</div>
</div>
The part that I haven't been able to figure out is how to make entries.authorname and entries.entrytitle show up when the user types in an entryid that is in entries.entryid.
assigns and entries are both arrays of records using JSON
assigns is JSON made up of assigns.id, assigns.judgeid, assigns.entryid.
entries is JSON made up of entries.entryid, entries.entrytitle, entries.authorname
When assigns arrives, entryid is empty. The form is used to fill in the entryid and when it is filled in, I'd like to be able to show next to it the title and authorname for that entry.
NOTE: I've added some important information at the end of this answer. So please read to the end before you decide what you're going to do.
You're going to have to do something that does the look up.
Also a few other changes I'd add, mostly so you can actually validate the items in your repeat.
(There's a summary of what I did after the psuedo code below).
<div ng-app>
<div id="assignment" ng-controller="AssignData"
ng-init="JudgeID=107;CategorySelect='MS';PublishSelect='P'">
<div ng-show="loaded">
<form class="entryform ng-cloak" name="assignform" ng-submit="sendForm()">
<p>Entry numbers assigned to this judge</p>
<p ng-repeat="assign in (formassigns =(assigns | filter:AssignedJudge))"
ng-form="assignForm">
<input type="text" ng-model="assign.entryid"
ng-change="checkEntryId(assign, assignForm)"
name="entryid" required/>
<span ng-show="assignForm.entryid.$error.required">required</span>
<span ng-show="assignForm.$error.validEntry">
{{assignForm.$error.validEntry[0]}}</span>
{{assign.entry.authorname}} {{assign.entry.entrytitle}}
</p>
<button type="submit">Save Assignments</button>
<p>This will keep the assignments attached to this judge.
You will be able to send all of your assignments to all
of your judges when you are finished.</p>
</form>
</div>
</div>
</div>
Then in your controller, you'd add a function like so (be sure to inject $http or a service you wrote to pull the values from the server):
$scope.checkEntryId = function(assign, form) {
$http.get('/CheckEntry?id=' + assign.entryid,
function(entry) {
if(entry) {
assign.entry = entry;
form.$setValidity('validEntry', true);
} else {
form.$setValidity('validEntry', false, 'No entry found with that id');
}
}, function() {
form.$setValidity('validEntry', true, 'An error occurred during the request');
console.log('an error occurred');
});
};
The basic idea above:
Use ng-form on your repeating elements to allow for validation of those dynamic parts.
Create a function that you can pass your item and your nested form to.
In that function, make your AJAX call to see if the entry is valid.
Check the validity based on the response, and call $setValidity on your nested form you passed to the function.
Use ng-show on a span (or something) in your nested form to show your validation messages.
Also, assign your checked entry to your repeated object for display purposes. (you could use a seperate array if you want, I suppose, but that would probably get unnecessarily complicated).
I hope that helps.
EDIT: Other thoughts
You might want to wrap your call in a $timeout or some sort of throttling function to prevent the entry id check from spamming yoru server. This is an implementation detail that's totally up to you.
If this is a check you do all over the place, you'll probably want to create a directive to do it. The idea would be very similar, but you'll do the check inside of a $parser on the ngModelController.
The method I showed above will still actually update the model's entryid, even if it's invalid. This is usually not a big deal. If it is, you'll want to go with what I suggested in "other thought #2", which is a custom validation directive.
If you need more information about validation via custom directives I did a blog entry on that a while back
I'm a beginner about Razor, and sometimes I get stuck with really simple things.
I have this foreach loop:
#foreach (dynamic item in ViewBag.EAList)
{
<li>
#using (#Html.BeginForm("Duplicate, "Daily"))
{
<p>#item.AuthorComment</p>
#Html.Hidden("EstadoDeAlmaID", #item.EAID)
#Html.Hidden("PosterID", Session["id"].ToString())
<input type="submit" value="Send" />
}
</li>
}
This line:
#Html.Hidden("EstadoDeAlmaID", #item.EAID)
Doesn't work, and I don't know how to make it work, I tried many ways, without #, with (--), with #(--)...
Could someone help me to display the dynamic value in my hidden field?
In addition, if someone know about a good Razor samples websites, I would be very thankful.
I had the same problem, found that a simple cast solved my problem.
#Html.Hidden("id", (string) ViewBag.ebook.isbn)
In Razor, once you are in "C# land", you no longer need to prefix values with # sign.
This should suffice:
#Html.Hidden("EstadoDeAlmaID", item.EAID)
Check out Scott Gu's article covering the syntax for more help.
Update
And I would also move your <li></li> within your using block, as Razor works better when you wrap HTML blocks inside of a code blocks.
Also, your Html.BeginForm should live outside of your loop.
#using (#Html.BeginForm("Duplicate, "Daily"))
{
<ul>
#foreach (? item in ViewBag.EAList)
{
<li>
<p>#item.AuthorComment</p>
#Html.Hidden("EstadoDeAlmaID", item.EAID)
#Html.Hidden("PosterID", Session["id"].ToString())
<input type="submit" value="Send" />
</li>
}
</ul>
}
Where ? in the foreach loop is the type of your items in EAList.
To avoid the Extension methods cannot be dynamically dispatched exception, use a model instead of ViewBag so you will not be using dynamic objects (this will avoid all the unnecessary casting in the View and is more in line with MVC style in general):
In your action when you return the view:
return View("ViewName", db.EAList.ToList());
In your view, the first line should be:
#model IEnumerable<EAListItem> //or whatever the type name is
Then just do:
#foreach(var item in Model)
You got the error, "Extension methods cannot be dynamically dispatched"... therein lies your trouble.
You should declare you loop variable not to be of type dynamic, but of the actual type in the collection. Then remove the # from the item.EAID call inside the #Html.Hidden() call.
The simple solution for me was to use ViewData instead of ViewBag. ViewBag is just a dynamic wrapper around ViewData anyway.
#Html.Hidden("ReportID", ViewData["ReportID"])
but I don't know if this will help in your case or not since you are creating dynamic items in your foreach loop.
I have found that when i want to use the view bag data in the HTML
Getting back to basics has often worked for me
<input type="hidden" name="Data" id="Data" value="#ViewBag.Data" />
this gave the same result.