Minimalistic Kansoapp

211 views
Skip to first unread message

Descartes

unread,
Aug 31, 2011, 11:12:33 AM8/31/11
to kanso
Hello,

I've created a very minimalistic Kansoapp, with the only purpose of
demonstrating CRUD (http://en.wikipedia.org/wiki/
Create,_read,_update_and_delete)

One can do a login and a logout, add a new textphrase, change it and
delete it. No event handling, no error handling, no jquery. Just as
simple as possible.

As a real newbie I cannot gurantee that this Kansoapp is scripted like
it should be in "best practice", because I'm no programmer (profession
lawyer in Germany). If someone will proof this, it would be kind.

Is there a way to give it to the community as folderstructure or over
replicating the couchdb?

Best regards

Descartes

John Hartnup

unread,
Aug 31, 2011, 11:13:46 AM8/31/11
to ka...@googlegroups.com
One good, free way, would be to put it in GitHub.
--
"There is no way to peace; peace is the way"

Caolan McMahon

unread,
Aug 31, 2011, 11:18:59 AM8/31/11
to ka...@googlegroups.com
Hey Descartes,

This sounds like it could be very useful for newcomers to Kanso. I'll
be happy to review it once you find a place to share it. As John says,
GitHub would be ideal, it provides some nice tools for commenting on
code and sharing changes.

Thanks!

Caolan

Descartes

unread,
Aug 31, 2011, 11:49:01 AM8/31/11
to kanso
I've put it here:

http://martin.mueller.mw/kanso/minimalistic.zip

Best regards

Descartes

On 31 Aug., 17:13, John Hartnup <john.hart...@gmail.com> wrote:
> One good, free way, would be to put it in GitHub.
>

Descartes

unread,
Aug 31, 2011, 3:18:26 PM8/31/11
to kanso
Hello,

sorry, have seen your comment to late, because I didn't reload the
page.
Is the link I provided OK?

Greetings

Descartes

Caolan McMahon

unread,
Sep 1, 2011, 11:50:16 AM9/1/11
to ka...@googlegroups.com
Thanks, this looks like a great learning tool. Basic CRUD app with
nice comments throughout :)

I think you'll find much more interest if you're able to provide a
link to the app on GitHub. It would make it a lot easier to browse the
code and discuss. If you'd like to post it on there, but need some
help getting it uploaded, feel free to contact me on GTalk or IRC
(caolanm on FreeNode) and I'll be happy to help.

Caolan

Descartes

unread,
Sep 2, 2011, 3:09:15 AM9/2/11
to kanso
So here we go ... hope I did this right - my first contact with
github.

https://github.com/descartes1/Kanso-CRUD


On 1 Sep., 17:50, Caolan McMahon <caolan.mcma...@gmail.com> wrote:
> Thanks, this looks like a great learning tool. Basic CRUD app with
> nice comments throughout :)
>
> I think you'll find much more interest if you're able to provide a
> link to the app on GitHub. It would make it a lot easier to browse the
> code and discuss. If you'd like to post it on there, but need some
> help getting it uploaded, feel free to contact me on GTalk or IRC
> (caolanm on FreeNode) and I'll be happy to help.
>
> Caolan
>

Descartes

unread,
Sep 5, 2011, 11:18:03 AM9/5/11
to kanso
Hello again,

I'd like to make a second "easy app" for "how css and jquery comes in
to play"

Therefore I have tested and tried different things, but did not
getting it round.

In events.js I have

exports.jquerytest = function () {

$(document).ready(function() {

$('#content').click(function() {alert('Handler for .click()
called.');});

});
};

events.on('init', function () {

exports.jquerytest();

});

and it works nice. If I click an the footer, the alert comes up.

But how do I reference with jquery selectors into deeper (DOM)
structure?

Including a template in phrase.html by

<ul class="zebra">
{>"phrases_rows.html"/}
</ul>

and referencing it through

$('.zebra').click(function() {alert('Handler for .click()
called.');});

in the above did not work. Think this must be something with 'init'
and template rendering ... I don't get the things together.

Can anyone give a hint?

Descartes

Caolan McMahon

unread,
Sep 5, 2011, 12:05:08 PM9/5/11
to ka...@googlegroups.com
This is probably to do with how Kanso renders the first request.

Firstly, the server (couchdb) renders a static HTML page and delivers
it to the browser. Then, the commonjs environment is loaded
client-side and an 'init' event is fired (the event you are
subscribing to). This is a good time to bind event handlers to parts
of the base.html template not going to be replaced when you update the
content div.

Next, the init event triggers URL handling by Kanso. It will attempt
to match the original request to the correct show / list / update
function and will *re-render* it client-side. That usually means the
content div will be replaced with this new content, blowing away any
event handlers you might have bound to HTML elements already in there
during 'init'.

The 'afterResponse' event is probably what you're looking for. Though
you'll want to just bind to it once inside the show / list / update
function:

exports.myShow = function (doc, req) {
events.once('afterResponse', function (info, req, res) {
// bind event handlers
});
return {
title: 'myPage',
content: templates.render(...)
}
};

This ensures they are re-bound when the page is rendered again and the
elements are replaced. Using 'event.once' just means the event will
fire the next time the event is emitted and then be unbound.


So the rule is probably something like this:
- If it is in base.html, not inside the 'content' div, and will never
change, use the 'init' event to bind event handlers
- If it is going to change depending on the page, and is probably
inside the 'content' div, use the 'afterResponse' event inside you
show / list / update function


Hope that helps, if I've misdiagnosed the issue just let me know.

Keep up the good work! :)

Caolan

Descartes

unread,
Sep 20, 2011, 5:50:18 AM9/20/11
to kanso
Hello,

thank you for your help! I've pushed my intended app to github. If
someone recommend to do things in another way because of "best
practice", let me know.

One thing I come over with jQueryUI is the use of href="#". When you
look at the jqueryui.html template in Kanso-CRUD-GUI you'll see that
I've used

<div id="accordion">
<div>
<h4><a href="">First</a></h4>
<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem
ipsum dolor sit amet.</div>
</div>

So href="" is empty, and the accordeon is working as expected. If I
use href="#" and look at firebug, kanso did a "GET /jqueryui -> "_show/
jqueryui" {} data: {}" with every click on the accordeon header and
the accordeon is not working properly. I think the same issue comes up
with the use of "datepicker".

Behavior of kanso is right in my eyes, but interfere with jqueryUI. Is
there a recommended way to handle this?

I'll add the links ti the two apps in kanso wiki. Also these are no
sites using kanso I think it could be helpfull.

Regards

Descartes

Descartes

unread,
Sep 20, 2011, 5:53:31 AM9/20/11
to kanso

Peter Bacon Darwin

unread,
Dec 7, 2011, 7:54:47 AM12/7/11
to ka...@googlegroups.com
As an exercise, I have updated Descartes Minimalist CRUD Kanso app to the new framework (CouchTypes & Duality).  It seems to work OK and only required a few minor changes.  I used the skeleton generated by "kanso create xxx" as a guide. See https://github.com/petebacondarwin/Kanso-CRUD.
  • kanso.json: Added a version and description; moved templates to dust/templates; moved base_template to duality/base_template; added in all the necessary dependencies
  • lib/app.js: Moved the events binding require out of the exports - I am not sure if this was necessary but it matched what the skeleton application does.
  • lib/events.js: Ported to using Duality
    • require("kanso/events") => require("duality/events")
  • lib/lists.js, lib/shows.js, lib/types.js, lib/updates.js and lib/validate.js
    • Ported to using Duality (added dependencies on duality, duality-dust and dust)
      • require("kanso/templates") => require("duality/templates")
      • require("kanso/utils") => require("duality/utils")
    • Ported to using CouchTypes (added dependency on couchtypes)
      • require("kanso/types") => require("couchtypes/types")
      • require("kanso/fields") => require("couchtypes/fields")
      • require("kanso/permissions") => require("couchtypes/permissions") 
      • require("kanso/forms") becomes require("couchtypes/forms")
    • Ported to using db and session modules (added dependencies on db and session)
      • require("kanso/db") => require("db")
      • require("kanso/session") => require("session")
  • templates/base.html: Linked to new js files generated by the modules and duality packages
    • Removed the link to kanso.js and added links to modules.js and duality.js - interestingly these seem to be found despite there not being a rewrite rule for them.
Feel free to fork and modify.  I have sent a pull request to Descartes in case he wants to merge these changes in.  Perhaps this project could form the basis for a simple tutorial in Kanso?  Next stop for me is to fork Descartes other Kanso app and then may be a simple Todos app?

Also, by the way, I have managed to get Kanso working no problem on Cygwin running under Windows 7.  I can write up the steps if you want.

Pete

Caolan McMahon

unread,
Dec 7, 2011, 12:00:16 PM12/7/11
to ka...@googlegroups.com
Thanks Pete, that looks great!

If you could add some information on getting Kanso running on Cygwin
to the wiki (http://kan.so/docs), I'm sure some Windows users will
really appreciate it.

Caolan

Andy Gold

unread,
Feb 3, 2012, 12:12:52 PM2/3/12
to kanso
Hi Caolan

I've been looking at Descartes and Pater's minimalistic kansoapp as a
basis for learning how to use kanso. I'm familiar with couchdb and
really like the couchapp approach, but wanted to invest my time in a
framework which I can be confident will continue to be well supported
and documented. Also I find that a lot of the old couchdb and couchapp
documentation is out of date with current examples out there.

Do you mind confirming what your commitment to Kanso is and your
future plans? Im really interested in something that is going to be
well documented and won't go out of date quickly.

On a side note I had a look at the Duality page on kan.so, but under
the heading Simplest Duality App, its left blank. Am I right in
thinking this would be it?

Thanks

Andy



On Dec 7 2011, 6:00 pm, Caolan McMahon <caolan.mcma...@gmail.com>
wrote:
> Thanks Pete, that looks great!
>
> If you could add some information on getting Kanso running on Cygwin
> to the wiki (http://kan.so/docs), I'm sure some Windows users will
> really appreciate it.
>
> Caolan
>
> On 7 December 2011 04:54, Peter Bacon Darwin <p...@bacondarwin.com> wrote:
>
>
>
>
>
>
>
> > As an exercise, I have updated Descartes Minimalist CRUD Kanso app to the
> > new framework (CouchTypes &Duality).  It seems to work OK and only required
> > a few minor changes.  I used the skeleton generated by "kanso create xxx" as
> > a guide. See https://github.com/petebacondarwin/Kanso-CRUD.
>
> > kanso.json: Added a version and description; moved templates to
> > dust/templates; moved base_template toduality/base_template; added in all
> > the necessary dependencies
> > lib/app.js: Moved the events binding require out of the exports - I am not
> > sure if this was necessary but it matched what the skeleton application
> > does.
> > lib/events.js: Ported to usingDuality
>
> > require("kanso/events") => require("duality/events")
>
> > lib/lists.js, lib/shows.js, lib/types.js, lib/updates.js and lib/validate.js
>
> > Ported to usingDuality(added dependencies onduality,duality-dust and
> > dust)
>
> > require("kanso/templates") => require("duality/templates")
> > require("kanso/utils") => require("duality/utils")
>
> > Ported to using CouchTypes (added dependency on couchtypes)
>
> > require("kanso/types") => require("couchtypes/types")
> > require("kanso/fields") => require("couchtypes/fields")
> > require("kanso/permissions") => require("couchtypes/permissions")
> > require("kanso/forms") becomes require("couchtypes/forms")
>
> > Ported to using db and session modules (added dependencies on db and
> > session)
>
> > require("kanso/db") => require("db")
> > require("kanso/session") => require("session")
>
> > templates/base.html: Linked to new js files generated by the modules and
> >dualitypackages
>
> > Removed the link to kanso.js and added links to modules.js andduality.js -

Caolan McMahon

unread,
Feb 3, 2012, 1:18:52 PM2/3/12
to ka...@googlegroups.com
Hi Andy,

I'm afraid Duality isn't particularly well documented at the moment.
Unless you need server-side rendering of pages I'd recommend using one
of the other popular frameworks like Backbone or Spine. Good
documentation is a major aim for this project, but because it can be
used in so many ways its difficult to get everything documented
straight away ;)

As for my commitment to Kanso, I make my living consulting on Kanso
projects so there is at least me and the teams I work with having
financial and strategic incentives to keep this project up to date.
This project has been evolving for around a year and will continue to
do so, there are plenty of exciting ideas in this space to keep us
interested!

Caolan

Daniel

unread,
May 3, 2012, 8:44:00 PM5/3/12
to ka...@googlegroups.com


Hi guys,

I'm new to kanso and so far very excited to be trying it out, it seems to meet my needs perfectly so far and I hope I'll be able to continue development on it. I've mostly got the Kanso-CRUD app from Peter working but when I tried to modifying it to let me add an embedded type (as in the old getting started guide) I've hit a couple of snags which make me wonder if I'm doing it the right way:

1. When I click the 'add' button for my new embedded type, the default_value handler for the _id field on new embedded type is called with req=null, which is a problem since it is trying to return req.uuid. I hacked my way around that by providing my own default_value handler which returns an empty string.

2. $.uPopup is not defined! I assume it is referring to the ui library from https://github.com/browndav/ui, and hacking briefly to get those scripts included on my pages seems to get somewhere, and embedded types are being added to my document successfully. However my hack consisted of just including ui.shared.js and ui.upopup.js, and it seems some stylesheets are missing because it doesnt render nicely.

What is the Right Thing to do here?

Daniel


Reply all
Reply to author
Forward
0 new messages