The standard Bootstrap Navigation includes a list of items and whichever item has the class of active is given a grey background to indicate it is the selected/active item in the navigation. Creating this navigation with Ember came to be a bit of a struggle, but behold I found a fix in the Ember.js github issues section with a solution.

The HTML code for the nav:

{{#link-li}}
{{#link-to ‘local’}}
Local
{{/link-to}}
{{/link-li}}

Some Javascript needs to be added to create the linkli component which handles assigning the class active to the current page/nav item.

App.LinkLiComponent = Em.Component.extend({
tagName: ‘li’,
classNameBindings: [‘active’],
active: function() {
return this.get(‘childViews’).anyBy(‘active’);
}.property(‘childViews.@each.active’)
});

After some thinking I will create a fictional news site done mostly in Bootstrap with Ember.

I hope to also take some features from two EmberJS sites that I use alot The Score and Twitch.

My deadline is to have this project done in 2 weeks(By May 1st) and roughly 50~ hrs spread over this time frame. I will update my daily progress on my github page.

After spending the last few months doing alot of tutorials, I finally got my first AngularJS app done!

As I briefly noted in my previous entries, I had created MoviezZz which you can also view my progression on MoviezZz GitHub.

I’ll admit the app isn’t the most visually appealing thing. But I would guess I put roughly 40 hours into the single page app spread over 2 weeks.

The app is a Fictional Movie Theatre website, that in which customers can enter customer information, movie time, and concession items.

The app contains AngularJS features such as Controller, Factory, ngRoute, Form Validation, $http, $scope, $location and some directives that included ng-click, ng-init, ng-if, and ng-repeat to name a few.

Up next, I hope to start an Ember/Bootstrap app in a day or two. I am still debating between a few ideas for what the app will be about.

I found an interesting bug on the second page of the form ‘movietime.html’ where users can select a movie, time and amount of tickets.

I was testing the form, and noticed an interesting bug after I tried to pick a new movie(a second time), after selecting a movie and time earlier.  When I pick the new movie, the movie time select option appears to have no value.  After looking into the select option in Developer Tools I noticed that the value inside (notice the pic below).  The value for the selected option went from 10:00PM(the previous movie time) to “? string:10:00 PM?”.  

When I click the select option Movie it runs ng-change=”moviesChange()” which is a function that populates the Movie Time select options.  I’m guessing that my problem has something to do with the data-binding from ng-model getting confused when the function gets fired.

After some further testing, I have fixed the bug after clearing/resetting the object fV.movieTime inside the moviesChange function with the simple code: $scope.fV.movieTime = {};

I’m still a bit puzzled what is happening with the data-binding/ng-model on the Movie Time select option, as it’s value gets changed in an odd way.

Since I’ve done a bunch of tutorials over the last few weeks that involved various Javascript libraries, it’s time now to get some coding done.

So I have a rough deadline for April 6th, a Bootstrap/AngularJS website which is a fictional Movie Theatre “MoviezZz”.  The progress of the website can be viewed on my Github page, and in the projects section of my website.

I’ll a bunch of more features to the site after the deadline, but my rough idea consists of a multiple-page form that involves ui-router.  The form will include customer information, movie selection, concession purchases, and a final confirmation page including all the information before confirming the purchase.