chanjs
DESCRIPTION
node.js-based imageboardTRANSCRIPT
![Page 1: ChanJS](https://reader036.vdocument.in/reader036/viewer/2022062511/54bd464d4a7959ae538b458f/html5/thumbnails/1.jpg)
ChanJS
@WeAreFractal
http://chanjs.nodester.com/
https://github.com/wearefractal/chanjs
![Page 2: ChanJS](https://reader036.vdocument.in/reader036/viewer/2022062511/54bd464d4a7959ae538b458f/html5/thumbnails/2.jpg)
ChanJS
• Pure-javascript image board using node.js, socket.io, mongoose, jade, stylus and spine.js
• Real time• Not written in Perl• Not written in 1995• Similarities to Facebook UI
![Page 3: ChanJS](https://reader036.vdocument.in/reader036/viewer/2022062511/54bd464d4a7959ae538b458f/html5/thumbnails/3.jpg)
![Page 4: ChanJS](https://reader036.vdocument.in/reader036/viewer/2022062511/54bd464d4a7959ae538b458f/html5/thumbnails/4.jpg)
Templating
![Page 5: ChanJS](https://reader036.vdocument.in/reader036/viewer/2022062511/54bd464d4a7959ae538b458f/html5/thumbnails/5.jpg)
![Page 6: ChanJS](https://reader036.vdocument.in/reader036/viewer/2022062511/54bd464d4a7959ae538b458f/html5/thumbnails/6.jpg)
![Page 7: ChanJS](https://reader036.vdocument.in/reader036/viewer/2022062511/54bd464d4a7959ae538b458f/html5/thumbnails/7.jpg)
- if (data.length)- each thread in datadivinclude Thread- elsep Sorry, there are no threads!
- if (data.length)- each thread in datadivinclude Thread- elsep Sorry, there are no threads!
- if (data.length)- each thread in datadivinclude Thread- elsep Sorry, there are no threads!
Board.tpl ->
- if (data.length)- each thread in data
divinclude Thread
- elsep Sorry, there are no threads!
CommentInput.tpl ->
forminput type="text", placeholder = "Comment"input type="button" ...span image
![Page 8: ChanJS](https://reader036.vdocument.in/reader036/viewer/2022062511/54bd464d4a7959ae538b458f/html5/thumbnails/8.jpg)
![Page 9: ChanJS](https://reader036.vdocument.in/reader036/viewer/2022062511/54bd464d4a7959ae538b458f/html5/thumbnails/9.jpg)
- if (data.length)- each thread in datadivinclude Thread- elsep Sorry, there are no threads!
- if (data.length)- each thread in datadivinclude Thread- elsep Sorry, there are no threads!
- if (data.length)- each thread in datadivinclude Thread- elsep Sorry, there are no threads!
Thread.tpl ->
- if (data.length)- each comment in item
include Commentinclude CommentInput
- elsep Sorry, there are no Comments.
CommentInput.tpl ->
forminput type="text", placeholder = "Comment"input type="button" ...span image
![Page 10: ChanJS](https://reader036.vdocument.in/reader036/viewer/2022062511/54bd464d4a7959ae538b458f/html5/thumbnails/10.jpg)
![Page 11: ChanJS](https://reader036.vdocument.in/reader036/viewer/2022062511/54bd464d4a7959ae538b458f/html5/thumbnails/11.jpg)
- if (data.length)- each thread in datadivinclude Thread- elsep Sorry, there are no threads!
- if (data.length)- each thread in datadivinclude Thread- elsep Sorry, there are no threads!
- if (data.length)- each thread in datadivinclude Thread- elsep Sorry, there are no threads!
Comment.tpl ->
- if (data.length)div
#{comment.text}
CommentInput.tpl ->
forminput type="text", placeholder = "Comment"input type="button" ...span image
![Page 12: ChanJS](https://reader036.vdocument.in/reader036/viewer/2022062511/54bd464d4a7959ae538b458f/html5/thumbnails/12.jpg)
ChanJS – Category.tpl- if (data.length)
ul- each item in data
li= a(href='#/category/' + item._id item.name
- elsep Sorry, there are no categories.
![Page 13: ChanJS](https://reader036.vdocument.in/reader036/viewer/2022062511/54bd464d4a7959ae538b458f/html5/thumbnails/13.jpg)
Spine.jshttp://maccman.github.com/spine/
![Page 14: ChanJS](https://reader036.vdocument.in/reader036/viewer/2022062511/54bd464d4a7959ae538b458f/html5/thumbnails/14.jpg)
Spine.js Routing
o.app = Spine.Controller.create({init: function () {
this.routes({"/thread/:id": function (id) {
o.renderModel('chanjs.Thread', {_id : id}); },
"/board/:id": function (id) {o.renderModel('chanjs.Board', {name : id});
},
"/category/:id": function (id) {o.renderModel('chanjs.Category', {_id: id});
},"/": function (id) {
o.loadTemplate('Category', function(){o.renderModel('chanjs.Category', {});
});},
});}}).init();
Spine.Route.setup();