Project Pitbull: Sprint 1 & 2
My Coding
I fleshed out the details of CartCollection, ProductModelModel and CartLineItem yesterday. We now have a basic flow which works form start to results to add to sizes hopup to add to cart. This will allow Bill work on Cart page display and also support PDP. Next: some code cleanup, add Jasmine testing and code walkthrough.
dust render calling custom functions
I needed a way to highlight a selected element in a html select when iterating over a list of options. I also needed a way to have the dust idx start at 1 not 0 as it does by default. I knew you could call functions in dust but didn't know how. There is not alot of dust help articles out there but over the course of a few hours trial and error I figured it out.
You can pass a function to the dust render call as part of the object passed and then invoke that from the template
calling a js fn dustIdxPlusOne() from template:
{dustIdxPlusOne}
..yeah just like an attribute. In this case dustIdxPlusOne() returned the step number from dust idx (starting at 1).
but you can also call js fn jambDeptMatch() as conditional as follows:
{#jambDeptMatch} selected="selected" {/jambDeptMatch}
...in this case jambDeptMatch() returns a boolean true/false, if true then selected is output in the template.
You can define the fn as follows, it gets passed 2 params
dustIdxPlusOne: function(chunk, context) {
// your code here
},
Note: context has the data that's current on the template stack. You can set a breakpoint and inspect context to see the data in it. Please be sure to check validity of data before using it, otherwise you may kill the template!
Update: 7/11 turns out dustIdxPlusOne is useful in other places so to stay DRY I found a way to get it into the global dust object so people can just call like:
{@dustIdxPlusOne}{.}{/dustIdxPlusOne}
I knew dust has helpers which you can extend (like filters) so I looked at the dust src and saw how they coded idx and copied it to add 1
<code>
dust.helpers = {
sep: function(chunk, context, bodies) {
if (context.stack.index === context.stack.of - 1) {
return chunk;
}
return bodies.block(chunk, context);
},
idx: function(chunk, context, bodies) {
return bodies.block(chunk, context.push(context.stack.index));
}
}
</code>
...and my addition
<code>
dust.helpers.dustIdxPlusOne = function(chunk, context, bodies) {
return bodies.block(chunk, context.push(context.stack.index + 1));
};
</code>
Credits to Dice and LIG team, my Fluid colleague for how he setup dust and custom filters.
Planing and organization
We're up to 8 client side devs at the moment (4 concentrating on PDP and 4 on the rest of the app wizard, results and cart). Its critical to keep everyone tasked and making progress. We have daily checkins 4 days a week and IM during the day.
Floating and ul
Ran into this unusual case of a dev having an image which can vary in size a little which is floated left. Then text description naturally flows right. All is ok except the text description included ul bullets. The actual bullets were left of the box.
Turns out the solution is to make the ul have overflow: hidden style
Stack Overflow to the rescue again.
Git naming wierdness
Yesterday, one of the team devs renamed a file and committed it. I committed changes, had to fix a merge conflict and comiited. But once I did I got a runtime error locally because my local thought the ..../resourcepages/ContactUs.
#⚡ git diff origin/master
....
--- a/app/javascript/backbone/
+++ /dev/null
Another dev had the same issue however he was about to fix by doing a git checkout of that ContactUs.js file. I tried and that did not work for me yesterday.
The first rename was case on change but the dev renamed again to better follow our naming conventions. Then when I did another git pull this time the renamed file is brought down. It seems like changing the filename case caused a problem but not a true naming change.
#⚡ git pull
...
2 files changed, 96 insertions(+)
rename app/javascript/backbone/
create mode 100644 app/javascript/backbone/views/
Comments
Post a Comment