tbranyen / github-viewer Goto Github PK
View Code? Open in Web Editor NEWGitHub Viewer.
License: MIT License
GitHub Viewer.
License: MIT License
I'm getting "Uncaught TypeError: Cannot read property 'View' of undefined" in Chrome after adding layoutmanager plugin to backbone boilerplate.
All scripts are loading, but Im wondering if it is the execution order.
I dont know require.js that well, but it appears that layout.manager is loading before backbone.js.
I'm not sure if thats it and Im not sure how require.js is handling the execution order.
Uncaught TypeError: Cannot read property 'View' of undefined
Here is my require on main.js
require([
"namespace",
// Libs
"jquery",
"use!backbone",
// Modules
"modules/example",
// Plugins
"plugins/backbone.layoutmanager"
],
and my config.js
// Set the require.js configuration for your application.
require.config({
// Initialize the application with the main application file
deps: ["main"],
paths: {
// JavaScript folders
libs: "../assets/js/libs",
plugins: "../assets/js/plugins",
// Libraries
jquery: "../assets/js/libs/jquery",
underscore: "../assets/js/libs/underscore",
backbone: "../assets/js/libs/backbone",
// Shim Plugin
use: "../assets/js/plugins/use",
layoutmanager: "../assets/js/plugins/backbone.layoutmanager"
},
use: {
backbone: {
deps: ["use!underscore", "jquery"],
attach: "Backbone"
},
underscore: {
attach: "_"
},
layoutmanager: {
deps: ["use!underscore", "jquery"]
}
}
});
Inside User.Views.List, you iterate through the collection and insert the entire list into a "ul".
And inside User.Views.Item, you set the tagName to "li".
Instead of a "ul", I would like to have my items be inside of a "div", and then my individual items also be inside of a "div".
But I tried this and it was re-rendering all the items inside of the div, for each item. IOW, for the first user, it would render every user, and the second user, it would render every user, etc.
How can I achieve a parent DIV with a list child DIV items? Or must the tags be different to render correctly?
Thanks for your help.
add in routing for this app
I've installed github-viewer to a sub-directory on my Apache server (i.e., not through the provided node server) at http://www.pinksy.co.uk/backbone/github-viewer/. It works, but the URL contains repeated sub-paths when the buttons are clicked.
I followed the notes at https://github.com/tbranyen/backbone-boilerplate/wiki/Relative-path-setup-notes to tweak it for relative paths, with the following changes:
i. Change index.html to use relative paths instead of absolute paths:
<link rel="stylesheet" href="app/styles/index.css">
...and ...
<script data-main="app/config" src="vendor/js/libs/require.js"></script>
ii. Change the routes.
from:
routes: {
"": "index",
"org/:name": "org",
"org/:org/user/:name": "user",
"org/:org/user/:user/repo/:name": "repo"
},
to:
routes: {
"backbone/github-viewer/": "index",
"backbone/github-viewer/org/:name": "org",
"backbone/github-viewer/org/:org/user/:name": "user",
"backbone/github-viewer/org/:org/user/:user/repo/:name": "repo"
},
iii. Change the root property in the Backbone.history.start call in main.js.
from:
Backbone.history.start({ pushState: true, root: app.root });
to:
Backbone.history.start({ pushState: true, root: "backbone/github-viewer/" });
iv. Change the path for the $.get call in the fetch function of Backbone.LayoutManager.configure in app.js.
from:
$.get(app.root + path, function(contents) {
to:
$.get(location.protocol + "//" + location.host+ '/' + app.root + path, function(contents) {
I also seemed to need to make the following additional changes:
v. Convert app.styl to app.css using the stylus tool, and change the @import in index.css accordingly
vi. Change the prefix field of Backbone.LayoutManager.configure in app.js.
from:
prefix: "app/templates/",
to:
prefix: "backbone/github-viewer/app/templates/",
vii. Change the router calls in repo.js and user.js.
from:
app.router.go("org"...
to:
app.router.go("backbone/github-viewer/org"....
viii. Change the img src in repo.js and user.js.
from:
src='/app/img...
to:
src='/backbone/github-viewer/app/img
I did note issue 1, which suggests that only the root property in the Backbone.history.start call in main.js needs to change, and the routes don't need to change, but that didn't seem to work.
So the page renders fine, but when you click on the search button for example, the URL changes to:
http://www.pinksy.co.uk/backbone/github-viewer/backbone/github-viewer/org/matchbox
instead of the expected:
http://www.pinksy.co.uk/backbone/github-viewer/org/matchbox
Have I done something wrong? I've copied it up uncompiled, so you're welcome to dig down into the scripts and have a look at my changes!
Thanks
thought this was already baked into jquery, but its not. going to add this in so i can have my fancy html5 tags again
FYI!
When linking to index/default url, the index route doesn't trigger the index function.
Example:
<a class="brand" href="/"> GitHub Organization Viewer</a>
Same problem when adding another route to call index function.
Example:
routes: {
"": "index",
"gohome": "index",
},
Any ideas so far?
npm WARN lifecycle [email protected]~postinstall: cannot run in wd %s %s (wd=%s) [email protected] bower install -s /root/github-viewer
npm WARN [email protected] requires a peer of generator-bbb@* but none was installed.
npm WARN [email protected] requires a peer of bower@* but none was installed.
npm WARN [email protected] requires a peer of grunt-cli@* but none was installed.
npm WARN [email protected] requires a peer of grunt-bbb-requirejs@* but none was installed.
npm WARN [email protected] requires a peer of grunt-bbb-server@* but none was installed.
npm WARN [email protected] requires a peer of grunt-bbb-styles@* but none was installed.
npm WARN [email protected] requires a peer of karma@~0.12.0 but none was installed.
npm WARN [email protected] requires a peer of karma@>=0.9 but none was installed.
npm WARN [email protected] requires a peer of karma@>=0.9 but none was installed.
npm WARN [email protected] requires a peer of karma@>=0.12.8 but none was installed.
npm WARN [email protected] requires a peer of mocha@* but none was installed.
npm WARN [email protected] requires a peer of karma@>=0.9 but none was installed.
npm WARN [email protected] requires a peer of qunitjs@^1.14.0 but none was installed.
npm WARN [email protected] No repository field.
npm WARN [email protected] No license field.
supply a cache manifest
to invalidate the cache and refetch data
swap out layouts for a responsive mobile presentation
I had to remove "collectionCache" from the app and than run grunt
for dist to work on apache/nginx server.
I am on node 0.12.0, npm, 2.5.1 versions.
Any clues ?
Appreciate your work and sharing for backbone examples. Keep it up.
The code in index.js:
routes: {
"": "index"
}
didn't work for me. I'm a newbie to backbone.js but I tried using:
routes: {
"*path": "index"
}
to make a default route and it appears to be working.
I have noticed a memory leak in the application and I managed to isolate it in backbone.layoutmanager.js plugin on lines 307-310 (if those lines are commented out, the leak is not present any more).
return parent.once("afterRender", function() {
// Trigger the afterRender and set hasRendered.
completeRender();
});
How to reproduce it:
paulswartz
and on stevemarcus
(toggle between them).If lines 307-310 in backbone.layoutmanager.js are commented out, then the memory consumption is not increasing when repeating step 3 and 4.
I know that this bug is for the backbone.layoutmanager project, but I see that the version there is different from the one used for github viewer, so I decided to report it here (it might be already fixed in backbone.layoutmanager??).
to indicate loading
Currently using the RC version of Bootstrap 3, but it seems they've updated a lot since all styles break with the update.
better plugin
I haven't tested it in chrome, but after running grunt server
and navigating to http://0.0.0.0:8000 firefox doesn't like the lowercase <!doctype html>
I changed it to <!DOCTYPE html>
and then it didn't like that the link and meta tags weren't closed so I closed them like this: <meta charset="utf-8"/>
. The page isn't giving any more Syntax Error messages, but it's showing up blank white.
Hi,
I did the following steps to build and run the release:
$ grunt
$ grunt server:release
I then opened http://127.0.0.1:8000/ in the web browser and finally got the JS error Uncaught TypeError: Cannot read property 'Collection' of undefined backbone.collectioncache.js:25
It relates to Backbone.Collection, i.e. Backbone is undefined. I tried to play around to identify the issue but couldn't find the root cause so far. I would suspect an issue in the grunt requirejs task and/or with the config.js relative paths.
Could you please let me know if I am missing something on my side? I'll be pleased to help if this is an actual issue.
Cheers,
Boris
This is to asked your big support for my data which has found at my google photo mobile apps account and also about my money which has found at different kind of banks handles as fund or other so please i need your fast support and response
Hello,
I tried the site demo and after a few refresh i'm getting weird error then the site is broken:
NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object
I guess Firefox lost it but i don't know why :(
Do you guys have the same?
Thks & Best.
The new module definitions in wip are pretty sweet, but break the portability aspect of AMD.
show the github users gravatars if they have one
I suppose what I see at githubviewer.org is not intended to be there.
for some reason its breaking on appending
I'm pretty sure on 66 of index.js you want "currentLayout.template" not "options.template".
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.