Develop Reference

Three.js and MVC

In three.js I've created a basic 'hero creation' program. Similar to Elder Scrolls swapping through heads,body etc to create a full character. I'd like to make it more interactive by letting other users edit the same hero. Each user will just read the same JSON file off the server.
To structure my code better I want to use MVC pattern but I'm confused about how to apply it.
I think all my event listeners will be a controller but would the View just be my three.js render() and the Model just the underlying JSON? Specifically applying MVC to this graphics domain is my big problem. If this is very bad form, would you have any suggestions on a different pattern/way to structure?

The View layer should:
Contain the rendering logic
Process user input and forward it to the controller layer (using the strategy pattern)
Keep your three.js objects in sync with the models
The Controller layer should:
Process the user input and update the models
The Models are your main entities. They shouldn't have any three.js related functionality.
I wrote a blog post that explains how to combine MVC and Three.js in detail: http://hecodes.com/2016/07/using-mvc-pattern-for-building-complex-three-js-applications/ .
You might find it helpful.

You may use a combination of MVC and Bridge pattern.
In this combination, you may abstract your view and use bridge pattern to allow your view to be created in several different formats.
Following link might help you : http://www.oodesign.com/bridge-pattern.html

To understand easily, you may consider this:
var modelObject = {};
var viewObject = {};
var controllerObject = {};
modelObject.str = "Welcome";
viewObject.showStr = function(modelObject) {
console.log(modelObject.str);
}
controllerObject.handler = function() {
viewObject.showStr(modelObject);
}
You can now call the function by handler while onclick or any event etc.,
Usually model is an abstraction of a data/data source

Alloy Forms Pattern?

In working with Titanium's Alloy framework, the models are using Backbone.js. I'm new to both Backbone.js and Alloy.
I'm familiar with ExtJS however, and in ExtJS, you can create a form, and then say something like:
form.loadRecord(record); // where record is an instance of a model
and then
form.getRecord(record); // When you're saving the form, get the record
var vals = form.getValues(); // And then get the values from the form that the user changed
record.setValues(vals); // Update your record with whatever values the user changed.
So my question is, what is the pattern for forms in Alloy? Or is there not one?
I could easily make my own functions, however I'm running into an issue where the app crashes when trying to bind a model to a form object like this:
that.model = model; // where model was passed in to the form.loadRecord function.

How can I structure a Backbone.View based plugin so that its nested views can be extended individually?

I am designing a generic object browser plugin which functions similar to OS X's Finder in column view. I have divided up the interface in to several nested views, the browser, the columns and the objects.
I will be using this plugin in several scenarios where the browser view, object view and column view may or may not need to be customised. Sometimes the objects will be files and folders for example.
This is OS X's Finder in column view in case you don't know what it looks like.
At the moment I am using RequireJS to pass around the dependencies however in order to simply inherit and extend the ObjectView, I must replace the entire stack.
Is there any better structure where the plugin can be extended but only part of?
BrowserView.js
var BrowserView = Backbone.View.extend({
open: function () {
var collectionView = new CollectionView( {collection: objects} );
}
});
CollectionView.js
var CollectionView = Backbone.View.extend({
render: function () {
this.collection.each( function (object) {
var objectView = new ObjectView( {model: objects} );
objectView.bind('click', this.select, this);
this.container.append( objectView.el );
objectView.render();
this.objectViews.push(objectView);
}, this );
},
});
ObjectView.js
var ObjectView = Backbone.View.extend({
});

I would put these views in the same module.
The purpose of a module - whether you're using RequireJS or just plain old JavaScript modules - is to encapsulate a set of related objects and functions, for a specific purpose. In this case, your purpose is the Finder View.
By keeping all of the related objects in the same file, you'll have more freedom and flexibility for how you make the objects work together.
As a side note, but related to what you're doing, you might be able to get some ideas for how to make this work from the "CompositeView" of my Backbone.Marionette plugin. I've built a hierarchical tree-view of folders and files with it before, and the column view of Finder would be fairly easy to build with it, too.
Note that I'm not suggesting you need to use my plugin. Rather, I think it might be helpful in figuring out how you want to structure your code.
I've got a blog post that talks about it here: http://lostechies.com/derickbailey/2012/04/05/composite-views-tree-structures-tables-and-more/
You can find the code and docs here: https://github.com/derickbailey/backbone.marionette
And the annotated source code for the composite view is here: http://derickbailey.github.com/backbone.marionette/docs/backbone.marionette.html#section-26

Implementing Backbone.Subset.js in Backbone.js to filter Models from a parent Collection

In this stackoverflow post i read about filtering backbone collections and using subsets.
One answer (by sled) recommends using backbone.subset.js (usage example).
I could not find any further resources on backbone.subset.js and I failed implementing it into my project.
It seems like backbone.subset.js is the perfect solution for what i'm trying to achieve.
(Having one "parent" collection that holds all models at all times, and depending on user input filtering the relevant models from the parent collection into a backbone.subset collection.)
My "parent" collection, holding all tasks:
var TasksAll = Backbone.Collection.extend({
url: '/tasks', // the REST url to retrieve collection data
model: Task // the models of which the collection consists of
});
var allTasks = new TasksAll();
Now i want to create a subset collection for e.g. tasks where task.status = 0:
var TasksTrash = new Backbone.Subset({
superset: allTasks,
filter: function(Task) {
return Task.isTrash();
}
});
var trashTasks = new TasksTrash();
Whereas inside the Task model, the method "isTrash" returns true if:
this.get('status') == 0
a) Are there any more resources on backbone.subset.js?
b) How do I implement above scenario?
c) Can I pass 'superset' and 'filter' options as params to the Backbone.Subset init function?
d) I looked into the backbone.subset.js code, when I 'reset' my parent Collection my subset Collections should be updated straight away, right?
PS: I'm fairly new to Backbone. Thanks for your help.

Looking at the source for backbone-subset, it looks as though there is a pre-initialization hook which you could utilize in order to make the 'sieve' or filter available as an option or argument:
https://github.com/masylum/Backbone.Subset/blob/master/backbone.subset.js#L50
As for providing parent as an argument, there is an outstanding patch to add that exact functionality:
https://github.com/masylum/Backbone.Subset/pull/5
With it, you can pass in parent as an option, if it is not an option the library will fall back to looking for it on the object Prototype

Backbone.js Collection and Tastypie filters

Instead of retrieving the entire table of records for a Backbone collection I've defined, I reckon it's much more efficient to make use of the tasty-pie filters I've created. How would I let Backbone use them? As far as I understand, Backbone models/collections only point to the top-level URI of the model.
e.g. I have a Bookings model defined in Django that can be accessed via "/api/booking" but i want to populate the Backbone Collection with "/api/booking?room=3" where the room number is context specific.

I've found out that backbone's .fetch() method accepts the "data" attribute just like JQuery .ajax().
booking.fetch({ data : { "room" : 3 } });