I have been a big fan of Backbone.js a long time. Together with Marionette.js it offers a solid toolkit to front-end web developers.
Lately I have worked with Qt and QML. With QML you can create nice user interfaces very easily, but what I have missed is that easy integration to backend applications. So I thought what if I try to use models and collections of backbone.js. I was quite a skeptical first, because backbone.js depends on jQuery with uses window and document objects that are not working in Qt. However I decided to try it.
Instead of jQuery, I grabbed Zepto.js that offers the same API as jQuery. I tuned the library slightly to get rid of errors related to window and document objects. There were not many of them.
Then I took underscore.js that backbone.js uses and finally backbone.js itself. I made slight changes to get them initialise correctly, but nothing big changes there.
After that I only needed to implement a simple application where I could test that everything is working. The result was much better than I expected. You can use directly Backbone’s collections and models with your Qt application and even listen events in your QML file, they just work.
https://github.com/nevalla/qml-backbone-todo
Define backbone models and collections
// app.js
var baseUrl = "https://api.engin.io/v1";
var Todo = Backbone.Model.extend({
});
var TodosCollection = Backbone.Collection.extend({
model: Todo,
url: baseUrl+”/objects/todos”,
parse: function(response) {
return response.results;
}
});
2. Use models and collections in QML file
//main.qml
function completeItem(index) {
var todo = App.todos.at(index)
todo.save({completed: true}, {
success: function(model) {
todoModel.setProperty(index, "itemProcessing", false);
},
error: function(){ console.log("error")}
} )
todoModel.set(index, todo);
}
3. Listen collection events in QML file
//main.qml
ListModel {
id: todoModel
}
Component.onCompleted: {
App.todos.on("add", function(todo) { todoModel.append(todo) });
App.getTodos();
}
So the first impact was very positive. I haven’t tested all functions of Backbone.js yet, so there may be some errors. However I don’t believe there are any fundamental errors that prevent using Backbone.js.
Nice work, what about moving patched js into separate repo?
Yep, that’s my plan. I will play a little bit more with the scripts and see what parts need more tuning before I’ll do that.