jQuery在ajax中加载的内容

Question

My application is supposed to be a single page application and I have the following code that works fine:

home.php:

<div id="container">
</div>

accordion.php:

    //Click functions: load content 
    $('#parents').click(function(){
        //Load parent in container
        $('#container').load('http://www.blabla.com/entities/parents/parents.php');
    }); 

parents.php:

<div class="entity_wrapper">
    Some divs and selectors 
</div>
<script type="text/javascript">
    $(document).ready(function(){
        //Some jQuery / javascript 
    }); 
</script>

So the content loads fine, while the scripts dynamically loaded execute fine as well.
I apply this system repetitively and it continues to work smoothly.
I've seen that there are a lot of frameworks available on SPA's (such as backbone.js) but I don't understand why I need them if this works fine.

From the backbone.js website:

When working on a web application that involves a lot of JavaScript, one of the first things you learn is to stop tying your data to the DOM. It's all too easy to create JavaScript applications that end up as tangled piles of jQuery selectors and callbacks, all trying frantically to keep data in sync between the HTML UI, your JavaScript logic, and the database on your server. For rich client-side applications, a more structured approach is often helpful.

Well, I totally don't have the feeling that I'm going through the stuff they mention.
Adding the javascript per page works really well for me.
They are html containers with clear scope and the javascript is just related to that part.
More over, for me the front end doesn't do that much, most of the logic is managed based on Ajax calls to external PHP scripts. Sometimes the js can be a bit more extended for some functionalities, but all just loads as smooth in less than a second.

If you think that this is bad coding, please tell me why I cannot do this and more importantly, what is the alternative I should apply. At the moment, I really don't see a reason on why I would change this approach as it just works too well.

I'm kinda stuck on this question because it just worries me sick as it seems too easy to be true. Why would people go through hard times if it would be as easy as this...

Edited question based on Juhana's comment:

I don't feel like my project fits the use case Backbone is made for. Should I use it anyway?

Answer 1

It all depends on the level of your apps scalability, ease of maintenance and performance. Looking at your code, you use some old (and to be deprecated) jQuery features so i gather that it was written quite some time ago.

Know that a single page application doesn't ends with data loading and also contains:

• Event bindings
• dynamic data bindings
• multiple views
• reusable UI
• flexible and non-dependant UI controls
• JS logic for parsing, displaying, keeping track and caching your data

For the past year i've been working on an analytics platform that doesn't use a single framework and by chance - we had to implement everything on our own (and done so quite successfully). It's scalable, robust, easy to understand and quite good on the performance bit, however using angular, ember or knockout would have saved us plenty of time since most maintenance is about the level of abstraction of our various core features (detching data, parsing it, keeping track of it etc).

It's also great for testing, which is a huge benefit when your system gets big, since the most important aspect of testing, in my opinion alone - is the dependency tracking it allows so basically, you can stop worrying about working on something - and ruining things that are seemingly unrelated

I think that although client side frameworks have a certain learning curve, some faster than others - it's worth your time since it takes away some of the routines one must constantly implement in his or hers development process.