3 ms·
I looked into using Backbone for my current project, and took a peek at several other MVC libs as well. In the end I decided they all did way more than I was l
by JesseAldridge 15y ago
I looked into using Backbone for my current project, and took a peek at several other MVC libs as well. In the end I decided they all did way more than I was looking for. I just wanted a simple way to separate my models from the DOM. This project seems better than anything else I've seen, but still, 1000 loc seems like a whole lot.
Here's how I'm currently doing it:
window.models = {}
function json_to_model(json, parent_model) {
// Create initial attrs.
var id = '' + Math.round(Math.random() * 100000000000)
var children = json.children
delete json.children
json['id'] = id; json.is_expanded = true
json.child_ids = []; json.parent_id = null;
if(parent_model) {
json.parent_id = parent_model.get('id')
var child_ids = parent_model.get('child_ids')
child_ids.push(json.id)
parent_model.set('child_ids', child_ids)
}
// Store models. Recurse children.
var new_model = {attrs:json}
add_get_set(new_model)
window.models[id] = new_model
render_model(new_model)
if(children) {
for(var i = 0; i < children.length; i++)
json_to_model(children[i], new_model)
}
return new_model
}
// Get and set. Render on set.
function add_get_set(model) {
model.get = function(key){ return this.attrs[key] }
model.set = function(key, val) {
this.attrs[key] = val
render_model(this)
localStorage.setItem('models', JSON.stringify(window.models))
}
}
Now, that doesn't do much. But for prototyping a gui, it seems pretty good. Less is more. I wonder how little code I can add to get it to work with a real backend.
- delambo 15y agoIf this solves your problem, then you probably didn't need MVC in the first place. But this doesn't necessarily decouple you from the DOM, and it sounds like all of the code that works with these models is a bunch of jQuery callbacks hooked into the DOM. Is that right? If so, and your project is sizable, then an MVC, like backbone.js, could be beneficial.
- JesseAldridge 15y agoThe code can work with the models without touching the DOM. You just access the models via ids. eg parent_model = window.models[foo_model.get('parent_id')] parent_model.set('text', 'foo text') When you respond to a button click or whatever, then yeah, you use a jQuery callback. The model id is stored in the DOM element (the view) which you access with $(this). Whenever the model changes (via set), the render function is automatically called. The render function is responsible for passing attributes to a template which renders html. Then the render function sticks the html wherever it's supposed to go. I think that's basically how all MVC frameworks work under the hood.
- vhackish 15y agoLooked at backbone.js and thought the same thing - overkill for what I needed. I'm always thinking "how will I scale this to portable devices", and one important consideration is code size. Plus IMHO HTML/JavaScript/CSS is quite MVC to begin with (HTML/CSS being the View, JavaScript of course is Controller logic, and just don't make the mistake of using the DOM as your data storage and use JavaScript objects for the Model). Maybe it depends on the complexity of the app, and I'd definitely look at agility.js first if I needed something since it's lighter than backbone.js ...