I am new to backbone.js and I am trying to integrate my work to backbone.js structure. As far as I know the point is to separate the codes in to an MVC pattern and I have some html files that are mainly based on javascript code. For example here: http://bl.ocks.org/mbostock/1256572 I want to make model and view for it. I have found some examples but this one is complicated, for example, draw() function should be in model or view? Or even the function that is used to update the data. I do not know how to separate them in backbone.
All the d3 functions should be contained in a view, the data in a model.
Related
I am writing a fairly complex Openlayers map application. I am considering implementing React with the application but I am wondering what added benefit it would bring, especially since openlayers has so many built in objects, methods, “stores” etc. Writing React code to access and control those objects etc would be a lot more code. Is it worth it in terms of performance or granularity? (Openlayers is already pretty granular).
OpenLayers handles map view as #estacks said , that is true. There is no reason to use react to handle map view.
But it may not be just map things on your page.
For example; I am working on a map page, it has:
three different data filter modal
one feture detail modal
one modal for property editing
one collapseble div to show data
I use jQuery and bootstrap to handle this features. I am struggling to do that, it is very hard for me.
React or another javascript library for building interfaces helps to achieve this complexity.
I am taking up a task to re-write the following flash app in HTML5:
http://www.docircuits.com/circuit-editor
Given the complexity of the app and my R&D so far, I have identified AngularJS as the preferred MVC framework for the implementation. The app has various parts such as panels, menus, properties, charts, etc., all of which I believe can be easily implemented in AngularJS.
The key problem, however, is that the component design and interaction (things like, drag/drop, move, wire handling, etc.) need to be Canvas-based, as I have been able to export all the vector graphics from Flash using the CreateJS toolkit (http://www.adobe.com/in/products/flash/flash-to-html5.html) into a Canvas library and not to an SVG.
The problem is that there is no clear way to communicate between the "individual objects inside a canvas" and AngularJS. I have looked at the following examples, but almost all of them work on the canvas object, and not about handling individual components inside Canvas:
AngularJS Binding to WebGL / Canvas
Is there already a canvas drawing directive for AngularJS out there?
I am kind of stuck here, and not sure what to do. Would really appreciate a some comments on:
Whether AngularJS is the right choice?
Should I try implementing the Canvas part in another library (such as Fabric.js, kinect.js, Easel.js) and integrate it with Angular (which again seems too big a task for now)?
If none of the above, what other framework should I switch to that can easily handle canvas as well as other functionality like panels, menus, charts etc. with ease?
We finally managed to work with AngularJS and HTML5 Canvas together. Here below, I will share, briefly, our requirements and the approach we followed to achieve it.
The requirement was a bit tricky as we wanted to:
Handle event handles on individual elements inside the canvas, and be able to add these elements dynamically based on the data in AngularJS
Keep data for each individual element in AngularJS while using Canvas for only display of the data.
Use controller inheritance for special handling of data in certain cases (for e.g. all the instances should be movable and draggable, but some instance may need to blink or show some color bands etc.)
To handle the operations on Canvas, we divided it into two parts:
Canvas service
It does the job of
initializing the canvas
adding or removing any element from the canvas
refreshing the canvas
Instance directive and controller
the angular controller keeps the handle for the corresponding "canvas element", and also all the data that is associated with it.
the event listeners on each element trigger specific functions in the angular controller which manipulate the instance data
the directive watches the instance data in controller, and correspondingly updates the canvas with the help of the canvas service
For controller inheritance, we found the following approach quite useful:
https://github.com/exratione/angularjs-controller-inheritance
This helped us create controllers dynamically, and with the help of instance directive, we could also handle individual updates on the canvas along with the generic event handling.
I understand that this approach may not be completely AngularJS-oriented, but it worked well for us, and we were able to handle a reasonable amount of interaction between AngularJS and HTML5 Canvas.
Sure you could do that with Angular just fine. However, depending on the complexity of your app and the type of data synchronization you need I would recommend using JS prototypes to handle that. The "angular way" would be to use directives instead.
Create a global drawing context and then split up the various components into JS objects. Handle the setup, logic, update, etc within each object (sort of like a class) and then draw to the global context. You should have a main draw loop which is essentially a setTimeOut function that updates the game object states and redraws everything.
An alternative approach is to combine Angular and JS prototypes. This is a great example: https://github.com/IgorMinar/Memory-Game
EDIT: another example of building games with angular http://alicialiu.net/leveling-up-angular-talk/examples/directive.html
Background
I'm working in a client-server REST based application which manages various kinds of information and defines a generic EntitiesCollection which extends Backbone.Collection.
The EntitiesCollection has an API (it extends the Backbone.Collection API) for CRUD operations, filtering, sorting and so on.
My team needs to write a Grid component which can display and manipulate an EntitiesCollection object. This grid will be based on some 3rd party component and we are seriously considering using Kendo.Grid.
The Challange
My first question is whether anyone ever tried to use Kendo.Grid whose data\data-source is actually a Backbone.Collection and whether that is a good and applicable idea at all?
I have seen various articles regarding Kendo and Backbone integration including Derick Bailey's Backbone And Kendo UI: A Beautiful Combination. However, these articles talk about view level integration (wrapping the Kendo.Grid with a Backbone.View). What I am looking for is data level integration - making Kendo.Grid work with Backbone.Collection.
Options
As far as I understand so far Kendo.Grid works with a Kendo.DataSource which in turn holds an internal collection - a Kendo.ObservableArray.
Assuming we are going for it I see several implementation options:
One of the options we discussed is converting our EntitiesCollection to a Kendo.DataSource however this seems to be a non option - the communication with the server has to be done through our own objects.
Replace the Kendo.DataSource with the EntitiesCollection - our EntitiesCollection will implement the Kendo.DataSource API and the grid will work with it as its dataSource object. I don't like this solution since I think I will loose a lot of the functionality that Kendo gives me in the Kendo.DataSource object.
The Kendo.DataSource will wrap our own EntitiesCollection and delegate requests to it.
The Kendo.ObservableArray object contained by the Kendo.DataSource will wrap our EntitiesCollection (see this sample implementation I found online). This approach seem to work with simple use cases however something seems wrong to me - I think that the Backbone.Collection is not the data object (in Kendo terminology) but the DataSource object - since it is the one that interacts with the remote server and fetches the data.
You might be interested in this article that I just posted:
http://www.kendoui.com/blogs/teamblog/posts/13-02-07/wrapping_a_backbone_collection_in_a_kendo_data_datasource.aspx
In it, I walk through the basics of what it takes to build an adapter to use a Backbone.Collection as the backing store for a DataSource, and connect it to a Kendo UI Grid.
I haven't completely solved all of your needs - for example, no paging support - but hopefully this will get you down the path far enough.
All Kendo UI widgets (grid including) can bind only to an instance of the kendo.data.DataSource.
I created the 'kendo-backbone' project to show a possible way to integrate Kendo UI with Backbone. The project wraps an existing Backbone Collection as a Kendo ObservableArray. The latter acts like a simple proxy and works entirely with the Backbone collection.
I have defined a model within it I have default model schema. I have a respective collection and views defied for it.
I have the model data stored as documents in Couchdb.My question is, How can I render these items in a browser.
I guess I am missing something small here with regard to linking the db and backbone.js. A little bit of direction would be very helpful.
To display/visualize the data you need views. Backbone.js provides a very skinny views layer with no magic in built. So in almost all but the most simplest cases you would like to auxiliate your mvc architecture with some user interface widget framework like YUI to provide UI components like datagrid or visualization toolkits to provide graphs and charts.
Of course you can stitch in plugins or create your own ui components in the view layer.
Backbone.js provides absolute freedom of choice to you to use whatever ui components you like in your views and unlike sproutcore/ cappuccino does not provide a hardwired ui framework.
So you would create view classes that perform the job of rendering the ui elements either by doing the hardwork themselves or by delegating them to some external library. In a typical scenario you will have nested views to provide a robust and responsive application interface. Eg. in a gridview you can have a master view for the whole table and views representing individual rows. If you are using sophisticated cell renderers then you can have the cell rendering logic in further nested views.
I am building a website based on widgets. I have a general WidgetInstancesController class with several methods, a model and some views for it. Now, I want to know if it's possible to extend this class. In other words, each widget should be another class, extending the WidgetInstancesController class. I want to store these widgets classes under app/widgets/. Also, these widgets won't have any specific model (as they will use the parent WidgetInstance model) but may have some specific views.
Any suggestions on how can I do this will be highly appreciated!
I would suggest building them as components, but it can be done in other ways.
I have had to do something similar where I built a CMS with add-on modules. To make it work logically, I had to turn MVC on its head a little and go for a very thin controller. Essentially, the front-end module logic was contained entirely at the Model level, with the associated views as elements. A module helper fetched and displayed the module in the public front-end. The back-end was handled conventionally via MVC with a normal fatness controller.
As it turned out, the Models were surprisingly lightweight and having everything as elements made usability a dream.