I'm looking through someone else's code and learning Backbone at the same time. This code supposedly uses Backbone but all the views have model's that are purposely set to null or just don't set model at all.
It is used some places in functions like this.model.set("stuff") though. It doesn't really match up to what I'm reading though so I'm wondering if someone could tell me what circumstances this would occur in. (Is BackboneJS just being used incorrectly? There are a ton of jQuery libraries which seem to be shoved into a Backbone structure)
Related
I am working on something like CMS based on AngularJS templates. I need to get bindings from a template so my users are able to fullfill those properties for specific pages.
So how can I get all bindings from a template?
You can't... using techniques AngularJS itself provides. Your question is just beyond the scope of the functionality the core devs thought to provide.
#bmceldowney is correct - a regex could be used to parse templates, although I think that would be challenging for a few reasons:
AngularJS templates can contain all sorts of complex expressions, not just simple vars. How will you deal with filters - and if you won't, you lose a lot of value here...
AngularJS can lazy-load templates and this is a common practice. You wouldn't want hundreds of useless templates floating around just in case they might be used at some point. How will you deal with templates that haven't been loaded yet - that you don't know exist?
If you're building a CMS that implies data management of some kind, and that's not going to get stored in the front-end because it would be useless there - nobody else would ever see it. So aside from the editing cycle itself, it seems like something to be solved server-side and not with AngularJS.
All that said, my suggestion would be to do exactly that - work out something server-side where you can access templates as raw files just by scanning some folder where they're stored, use regular expressions to find the template variables, and you're going to have to be clever with how you parse expressions and what you'll support here. Then you can prepare appropriate data objects to pass down to the client via an API for it to support the actual editing.
I have been searching online and have not been able to come across an example. Does anyone know of any resources for using nested attributes with AngularJS?
There's a lot of good information here and I've found it pleasant to work with. Their library does a lot of wiring for you, and I'm just starting to play with nesting the attributes but I did read on a blog that this library does it. I'll post more as I know it.
https://github.com/FineLinePrototyping/angularjs-rails-resource
Alright just did some quick reading on Nested Attributes in Rails here: http://api.rubyonrails.org/classes/ActiveRecord/NestedAttributes/ClassMethods.html
As far as I know there's no such equivalent provided with Angular. Generally speaking angular works with JSON encoded data coming back from requests like
{
"id":1,
"name":"Shaun"
}
and otherwise data is stored with Plain old javascript objects (or specific object types if a developer so chooses to create them).
There's lots of good info on various ways to use JavaScript on Crockford's site here http://www.crockford.com/javascript/javascript.html
But so far as I know you'll have to roll your own solution. I did a bit of googling on Nested Attributes and javascript and mostly the solutions/topic seem focused around Backbone.js but you might be able to adopt the same concept and just replace Backbone.js methods with their angular equivalents.
As it stands today angular doesn't really do a whole lot when it comes to your model outside of watching for property changes and updating things during a digest. My understanding is working on better functions for the models is a large part of what's in the works for version 2.0 whenever that hits.
i am a beginner in the backbonejs world und bought a book from Addy Osmani’s Backbonejs Application. i am reading the book and i try to build an application with backbonejs. Somewhere in the book, he wrote a section about backbonejs extendsion and expose how to use marionettejs. I visited on Github backbonejs extendsion site, they have many extendsion included marionettejs. Now i am confused about using backbonejs, should i use extendsion like Marionettejs too or not? I know that extendsion can brings many advantages for webdevelopment, when i gonna use backbonejs then i should use marionettejs too? When it is useful to use extendsion when not?
I find Marionette to be a useful addition to Backbone, because it reduces the amount of repetitive code you need to write (unbinding event listeners when views close, rendering one view for each item in a collection and attaching it to the DOM, etc.).
There's a nice (short) comparison of Marionette and plain Backbone here: http://addyosmani.github.io/backbone-fundamentals/#boilerplate-rendering-code
Ultimately, the best tool for you will depend on what you want to achieve and what your preferences are.
Full disclosure: I may not be entirely objective, since I'm writing a book on Marionette. But I'm sure other members will provide you with their own opinions.
I am trying to learn backbone, however truth be told, I'm feeling a little overwhelmed. Everywhere I look it is being done in a slightly different way, each with more frameworks and plugins to learn. So I have decided to put my faith in Addy Osmani and am reading his Backbone Fundamentals book. I have followed his recommendation and used the Backbone-Boilerplate. However for whatever reason, I have been unable to successfully install Grunt BBB so I cannot download the working examples.
What I am trying to do is follow this router section and use views. http://addyosmani.github.com/backbone-fundamentals/#router.js.
The problem is that I think these instructions are incomplete. For a start the collection.fetch() variable is in the wrong scope, and I really am not understanding where I need to place the views and how. I am pretty sure that if I could see a working example of this I could understand it, but as I said, everywhere I look its a different implementation.
Does anyone know how to use the backbone-boilerplate with routers and views? Are there any working examples anywhere?
Let me make a suggestion. A couple of months ago, I was where you are now: trying to learn backbone and trying to follow best practices while I did so. Like you, I came across Addy Osmani's book and like you I tried getting stated with backbone-boilerplate.
After much stumbling around, I eventually concluded that backbone-boilerplate was not something I needed to have while I was just learning backbone. It is now, only after having created a fully working, non-trivial CRUD application that I start to see how I might incorporate backbone-boilerplate. I think you probably need to be asking the questions that backbone-boilerplate answers (How can I break up my application into modules?, etc.) before you attempt to incorporate another framework or plugin. The same goes for Backbone.Marionette: great library, but you really need to have something to apply it to before using it.
Starting out, I would suggest having just a single file for all your backbone code.
One of the things that really helped me out was playing around with and extending various jsfiddle demos people had created using backbone. A simple google search will turn up quite a few. I found it a great way to learn as I was able to manipulate working code and get immediate feedback on what worked and what was allowed.
And although backbone is a client-side library, it's often simpler and faster just to ignore html and write stuff out to the console.
Finally, if you're willing to pay for it, I highly recommend Liam McLennan's set of backbone.js training videos on pluralsight.
I am new to backbone, and I'm here to ask for a little bit of help understanding how I would go about building my current webapp project. I'm developing a modular administration panel for servers. Every single "page" of the panel should be a packaged "module" including controllers, models and views.
The panel will consist of a main layout view being loaded initially, with a basic navigation. When a user clicks on a link on the navigation, a page gets loaded via AJAX into the layout.
(And if this sounds stupid / there is a reason not to do so please tell me :) )
Since others will develop these pages too, and since they are modular, I won't know what models, views and controllers I will be presented with inside the page i load via AJAX.
How would I best go about doing this with backbone?
I'm especially wondering about how I would extend Backbone models etc. dynamically, and how I would manage (for example) the user leaving the page and / or revisiting it later.
Does Backbone provide something I can work with, will I need to hack myself something together, is there a better way of doing things I am missing?
Your thinking around the problems sounds very correct. Make your UI components self contained as possible. Watch this 10 min video to get some more information on UI component best practices.
If you are interested about other important concerns of JavaScript application development, look at BoilerplateJS reference architecture which I published to share my experiences. That contains a similar sample application as you described (menu with component activation).
my recommendations for your UI component activation, deactivation are:
Do not remove/create DOM components. Reuse with hide/show, as your elements will recide in memory even after removing from DOM
Minimize keeping 'state' information on client side. When an user revisit the component, refresh it with a server call and then make it visible (use server as the single truth of state information).
See BoilerplateJS sample component implementations for more details. I know few who use it with BackboneJS (currently it ships with knockoutJS). We will ship a example of it using BackboneJS in v0.2 which is due in a week.
A common modular script loading framework that is used in conjunction with Backbone would be require.js. It might be what you're looking for. Require.js is all about AMD modules, asynchronous modules. Usually each model, collection, view is it's own module that defines the dependencies that particular module needs then loads those modules as needed. It's particularly well suited for large projects where you have lots of individual pieces that need to be mish-mashed together at different points of your application.
You could of course combine multiple backbone elements in a single module (usually I reserve this for Views and specific subviews that would only be used with the parent view) but it's really up to you.
With Backbone, usually the intent is to create single page applications - meaning all the page scaffolding is usually wrapped up as a single file and completely loaded onto the client-side at the get go. The data for each page is then called via ajax and populated as the user navigates and loads different aspects of the application. Is this what you intended in your description?
If you're looking to load different pages that are each individually grabbed form the server, then I'm not sure Backbone is the answer. There are other server-side MVC frameworks that help to accomplish that.
That generally touches on how Backbone is used for this sort of thing.
As for how to extend Backbone models and such, Backbone uses Underscore as a dependency and underscore provides a nice _.extend() function that can easily extend all your objects in pretty much any way you desire. Overriding default functionality, throwing in mixins, it's all pretty painless as far as Backbone goes. As a framework, Backbone is very agreeable when it comes to altering, modifying and customizing every little bit and piece.
As for handling users visiting and revisiting pages, Backbone.router allows you to create URLs that not only point to specific "pages" in your app but also to execute arbitrary code that needs to be executed to get there. Something like a logged in user visiting "mysite/#account" would trigger the router to load certain scripts that bring up that particular view as well as perhaps fetch() necessary data to get that view up and running for the user.
I'm not sure if there are resources out there that give you some kind of basic structure to start with. Most experiences I know of tend to go through the basic tutorials like "Todo List" and work their way up from there. I'm not sure what your experience level is with javascript or programming in general but I started with Backbone AND require when I knew really pretty much nothing. Only a vague notion of what JSON was and a low level understanding of HTTP as in, "it's that thing that gets web pages." That said, I think Backbone was really easy to get for me to start with and it's deepened my knowledge a lot about the whole client-side RESTful type app structure.
There is a really good list out there of the "Todo List" app in many different flavors such as Backbone and Knockout and some others. When deciding on a framework, I basically went through that code comparing all the different frameworks available and selected Backbone because it just seemed to make the most sense to me. I don't regret it. It's a lot of fun and I think the best way to get into it is to just try some demo tutorials.
Take a look at Marionette or Chaplin. Both are build on top of Backbone and provide a structured way to build larger application with Backbone.
Here is tutorial to organize your application as modules using backbonejs
http://backbonetutorials.com/organizing-backbone-using-modules/