Example using TroopJS #120
Conversation
Thanks for the contribution :D Can you explain what TroopJS is? Couldn't find any info on it. |
Just another front-end framework. Aims to package current javascript technologies and 'bind' them together with minimal effort for the developer.
On top of this we've added a pubsub system, templating, weaving (connect widget to dom) and auto wiring. The TroopJS moto goes something like
The name is taken from what you'd call a group of monkeys (troop) as originally it was targeted at an 'embedded' environment using spidermonkey. We're using todomvc as the onboarding project for new developers, so there's a step-by-step guide (in progress) that explains how we created this app. |
simplified the file structure quite a bit and provided an example using troopjs-bundle instead of individual modules. |
Not really sure what else I can do to get this merged. Perhaps use the new template from #126 when its ready? |
Sorry for the delay. I've been on holiday. It looks pretty good :) There are some things I'd appreciate if you could fix:
I'll review it more thoroughly when the above changes are implemented :D Some comments to your excellent TroopJS Todo app intro:
I agree, changed in master.
This is specified in the new App Specification.
Also in the App Specification. Do let us know if you have any more feedback or if something is unclear :D |
@mikaelkaron Any updates? |
hacking along on 0.0.2 ;) I'll make an updated todomvc as soon as I have that (using the new UI) |
@mikaelkaron Thanks for the update! Do you think 0.0.2 might be ready sometime over the next few weeks? Im trying to establish whether you'll have time to bring the TroopJS app in line with specs for our next major version (probably aiming to go out in a month). If you do, I'll mark the target release for this as 1.0 otherwise we can do it in 1.1 (probably 1..a few months after). We appreciate your contributions! |
I'll try to land 0.0.2 ASAP, so please target this for 1.0 |
Marked accordingly. Let us know if you need any help :) |
@mikaelkaron Any updates? The 1.0 release is close, and we need to get those apps that are going into the release merged. |
I've been a bit slow over here. I'll take a stab at it today! |
landed a bunch of stuff in my troopjs-todos repo (what I eventually 'copy' to todomvc). basically implemented all the requirements except routing. will take a stab at that tomorrow. |
a bit of reset and a commit later. done. |
|
||
.filter-active .completed, | ||
.filter-completed .active { | ||
display: none; |
sindresorhus
May 30, 2012
Member
CSS shouldn't be tied to the filters functionality.
Instead you should just hide/show the items directly.
CSS shouldn't be tied to the filters functionality.
Instead you should just hide/show the items directly.
mikaelkaron
May 30, 2012
Author
Contributor
just trying to save myself some coding for when you have a filter applied and add/remove items. I'll take a look at if it can be done without CSS.
just trying to save myself some coding for when you have a filter applied and add/remove items. I'll take a look at if it can be done without CSS.
@@ -0,0 +1,24 @@ | |||
define( [ "troopjs-core/component/widget" ], function CreateModule(Widget) { | |||
var RE = /^\s+|\s+$/; | |||
var ENTER = 13; |
sindresorhus
May 30, 2012
Member
ENTER_KEY
ENTER_KEY
|
||
switch($event.keyCode) { | ||
case ENTER: | ||
value = $element.val().replace(RE, EMPTY); |
sindresorhus
May 30, 2012
Member
Don't need regex for this: val().trim() instead
Don't need regex for this: val().trim() instead
mikaelkaron
May 30, 2012
Author
Contributor
does that trim of tabs etc?
does that trim of tabs etc?
mikaelkaron
May 30, 2012
Author
Contributor
right. I was looking at $.trim. I'll update
right. I was looking at $.trim. I'll update
define( [ "troopjs-core/component/widget" ], function CreateModule(Widget) { | ||
var RE = /^\s+|\s+$/; | ||
var ENTER = 13; | ||
var EMPTY = ""; |
sindresorhus
May 30, 2012
Member
Unnecessary constant, just compare against an empty string directly.
Unnecessary constant, just compare against an empty string directly.
@@ -0,0 +1,20 @@ | |||
define( [ "troopjs-core/component/widget", "jquery" ], function FiltersModule(Widget, $) { | |||
|
|||
var SELECTED = "selected"; |
sindresorhus
May 30, 2012
Member
Don't need a constant here either.
Don't need a constant here either.
var item = data.item; | ||
var completed = item.completed; | ||
%> | ||
<li class="<%= (completed ? 'completed' : 'active') %>"> |
sindresorhus
May 30, 2012
Member
-> <li class="<%= (completed ? 'completed' : '') %>">
-> <li class="<%= (completed ? 'completed' : '') %>">
define( [ "troopjs-core/component/widget", "troopjs-core/store/local", "jquery", "template!./item.html" ], function ListModule(Widget, store, $, template) { | ||
var RE = /^\s+|\s+$/; | ||
var ENTER = 13; | ||
var EMPTY = ""; |
sindresorhus
May 30, 2012
Member
Same as earlier comments
Same as earlier comments
var self = this; | ||
|
||
// Defer initialization | ||
$.Deferred(function deferredInit(dfdInit) { |
sindresorhus
May 30, 2012
Member
Use something like deferInit, instead of the ambiguous dfdInit, same with the below.
Use something like deferInit, instead of the ambiguous dfdInit, same with the below.
case "/completed": | ||
$element | ||
.removeClass(FILTER_ACTIVE) | ||
.addClass(FILTER_COMPLETED); |
sindresorhus
May 30, 2012
Member
.toggeClass( FILTER_COMPLETED );
.toggeClass( FILTER_COMPLETED );
// Update UI | ||
$($event.target) | ||
.closest("li") | ||
.slideUp("slow", function hidden() { |
sindresorhus
May 30, 2012
Member
Don't animate
Don't animate
// Get INPUT and disable | ||
var $input = $li | ||
.find("input") | ||
.prop(DISABLED, true); |
sindresorhus
May 30, 2012
Member
Why do you disable the input? it's only visible when in editing mode anyway.
Why do you disable the input? it's only visible when in editing mode anyway.
mikaelkaron
May 30, 2012
Author
Contributor
right now we know that localstorage is fast, so there's no need to disable the UI during write. But I'd like to have it there simply if one would try to implement a remote storage module, in which case it would disable the input box during write callback.
right now we know that localstorage is fast, so there's no need to disable the UI during write. But I'd like to have it there simply if one would try to implement a remote storage module, in which case it would disable the input box during write callback.
sindresorhus
May 30, 2012
Member
Ok, sure, I agree ;)
Ok, sure, I agree ;)
var $target = $($event.target); | ||
var title = $target | ||
.val() | ||
.replace(RE, EMPTY); |
sindresorhus
May 30, 2012
Member
Same as before val().trim()
Same as before val().trim()
Thanks for finishing this. I have to say, I like to good use of $.Deferred ;) I've done a review of your app and have some comments in addition to the inline ones:
Uncaught Error: NOT_FOUND_ERR: DOM Exception 8
|
I'll get on the CSS update tomorrow. Do you want me to make a topic branch for all of this as per:
or are you ok with this pull request as it is (besides the outstanding CSS fix)? I was also unable to reproduce your error, do you still have it? |
No not necessary, but keep it in mind for your next pull request. It makes your life a lot easier if you've ever need to submit multiple pull requests to the same project.
Yes, I still have that issue, Chrome 19 Mac Lion: Steps: Double-click the item, remove all the text, hit enter
Other than that, it looks good :) |
Ok, I'm able to reproduce in chrome. I'll take a look at that now. |
@addyosmani Actually 2.0 has been released. |
@sindresorhus Oh wow! That I did not know. He must have had a few late nights to wrap it all up so quickly :) |
use `.trim()` instead of regexp remove unused RE
Remover included RequireJS (load from assets).
There. Fixed what needed to be fixed to be RequireJS 2.0 'compatible'. |
Cool, just need that error fixed and we're golden ;) |
Fixed. Funny problem there actually, it's jQuery that triggers a simulated |
Right, when I think about it I think we had another app with the same problem, turned out to actually be a Chrome bug. Landed. Thanks for this addition to our collection ;) |
Well, I was only able to reproduce in chrome, and the underlying error is that jQuery will try to remove a node that does not exist anymore. I guess it's possible that this is the same problem (were you removing an element that had input descendants?). |
Can't remember, but here is the Chromium bug: http://code.google.com/p/chromium/issues/detail?id=104397 And here's the jQuery bug: http://bugs.jquery.com/ticket/11663 |
looks like the same to me. nice to know ppl are aware about it. |
But unfortunately not a lot of activity on the Chrome ticket... |
A TodoMVC example using TroopJS