I´m starting to get familiar with backbone.js but how can I wrap the objects
in something diferent than a div ? can this be done? I want to make this on my view setup.
You can easily override the default tag by setting the tagName property to whatever you want
var ListView = Backbone.View.extend({tagName: 'li'});
var listView = new ListView();
console.log(listView.el); // logs <li></li>
check out the documentation
Related
I'm trying to build an app which edits simple graphics on screen, fabricjs is the canvas library I use, and angularjs is the MVW framework I use.
Now, the bindings from DOM to fabric work just fine (I click a div, and corresponding object on canvas gets selected), but not the other way around. When I click an object on canvas, and it gets selected the corresponding DOM isn't updated. I've read here that I should be using $scope.$apply();, but I'm not sure where to put that.
How do I make fabric update $scope state?
You can see the code here, click the Add Rect button to add elements to the canvas, and notice that when you click the element's name on the right it get's selected on the canvas, but if you select it directly on the canvas it's button isn't high-lit.
code: http://plnkr.co/edit/lMogPGjJOXx9HLAdiYqB
FabricJS implements events on its classes, so one could bind arbitrary listeners to them. In your case, you could bind a listener to the "object:selected" event, which would call $scope.$apply() and would be fired whenever a object is selected on canvas.
See the Event Inspector Demo and the Observable Class Documentation. The Canvas class inherits all these methods, so you could bind listeners to it. You can even retrieve the selected object, as in the example:
var canvas = new Fabric.Canvas('canvas_container');
canvas.on("object:selected", function (options, event) {
var object = options.target; //This is the object selected
// You can do anything you want and then call...
$scope.$apply()
});
Based on the answer from Bernardo Domingues and MeLight's comment, it took me still some time to figure out.
The final solution for above is:
var canvas;
window.onload = function() {
canvas = new fabric.Canvas('canvas');
canvas.on("object:selected", function (options, event) {
//var object = options.target; //This is the object selected
var scope = angular.element(document.getElementById('canvas')).scope();
// You can do anything you want and then call...
scope.$apply();
});
};
The answer on AngularJS access scope from outside js function was very helpfull, together with http://jimhoskins.com/2012/12/17/angularjs-and-apply.html
If you also want to see the position-information change when moving, add:
canvas.on("object:moving", function (options, event) {
var scope = angular.element(document.getElementById('canvas')).scope();
scope.$apply();
});
How can I implement an editable view? For example, I have a PersonView. The default view will be showing the person info. Then when I double click, I want to enter "edit mode" where I can edit fields. I suppose you can imagine what I mean? Its common "pattern". How can I implement it? The "simple" way might be on dblClick I replace existing HTML with something else. But it doesnt seem right ... How can this be done?
you can achieve this in many ways:
swapping views,
inline editing,
swapping templates
here is a nice tutorial explaining what you need:
http://net.tutsplus.com/tutorials/javascript-ajax/build-a-contacts-manager-using-backbone-js-part-4/
You can add to your text fields some class, for example .disabled. Also you have to disable this fields by adding disabled attribute. Then add css rules to the .disabled class to make it like plain text (remove paddings, margins, borders etc.). Then on dblClick event just remove class and attribute.
Couldn't you just create another view for edit? since you're going to need different events separate inside of the edit view. Here is something I put together in jsfiddle
You can essentially create a new view passing the model that gets updated to the new view and show it in a region
newValue = ev.target.value;
this.model.set('contentPlacement', newValue)
mainView = new MainView({ model: this.model });
App.mainRegion.show(mainView)
http://jsfiddle.net/cLPfw/
I am new in Sencha Touch, so I don't know it's full structure. So the question is a little stupid, i guess :)
I have a view it is a nestedlist object. I have created a toolar object inside my nestedlist. Now I want to manipulate this toolbar from another view's callback. How can I access my toolbar object located in nestedlist view from event callback from another view object?
With that little information on your structure (are you using the MVC pattern? No example code given) I can only say that you can definitely achieve this with Ext.ComponentQuery
Lets say you added a custom property to your toolbar named ident='myToolbar' then you can access this toolbar (precisely said any toolbar with that custom property) by calling
Ext.ComponentQuery.query('[ident=myToolbar]')[0]
The result will be always a array but in this example we accept only one result, that is why I added [0]
For further information refer to the API. Ext.ComponentQuery is mighty if you know how to use it.
First give your toolbar an id, for example myToolbar. Then, in your callback, you can do something like this
var toolbar = Ext.getCmp('myToolbar');
to get your toolbar object. Next you can manipulate the toolbar using the toolbar variable, for example change the title:
toolbar.setTitle('New Title');
More info about getCmp() here.
More info about the toolbar here (Check the toolbar's methods to manipulate it).
I'm pretty new to Backbone and Marionette and am having a tough time getting my views to communicate.
I've got a composite view that displays a list of items. To add a new item to the list, I have a popup modal that opens in a new item view that is separate from the composite view.
I'm not sure that this is the best way to do this, but in the modal, I created a new instance of the collection with all of the items and added the new item to that collection. This new item shows up in the original composite view, but only after I refresh the page.
I can't seem to figure out how to get the composite view to listen for the add event and render the new model after it is added.
Am I on the right track here? If not, what should I be doing to add to a collection from a modal?
I think I got this figured out. Instead of creating a new collection in the modal view, I passed in the collection from the composite view as a parameter when I created the modal view. Now, when I add a new model in the modal, the 'add' event is automatically triggered on both versions of the collection and the view automatically renders the new model. No need to bind any extra events like I was thinking.
Your solution will work, but means your views are pretty tightly coupled. You might want to look into using events instead (see How do I send a model that was clicked on within a ItemView to another ItemView that is on the same page?)
How your functionality would work with events:
Within the modal, you enter the data for the model to create
When you press the "save" button,
you validate and save the model var myNewModel = ...
you trigger an event: MyApp.MySubApp.trigger("item:add", myNewModel)
In the controllerfor the list view, you listen to that event, and add the new model to the collection.
The handler code in your controller would look something like:
MyApp.MySubApp.on("item:add", function(model){
this.myCollection.add(model);
});
If you'd like to learn more about using events, check out 2 Marionette tutorials I wrote:
http://davidsulc.com/blog/2012/04/15/a-simple-backbone-marionette-tutorial/
http://davidsulc.com/blog/2012/05/06/tutorial-a-full-backbone-marionette-application-part-1/
Both use events to communicate information within the apps.
In addition, basic events are also explained here: http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf
I'm trying to change ComboBox configuration by reinitializing:
Ext.onReady(function(){
var mycb = new Ext.form.ComboBox({
//params
});
//here is other component initizing
var other = ....
onChange: function() {
//here I'm trying to reinitialize ComboBox
mycb = new Ext.form.ComboBox({
// other params
});
}
});
But after onChange event my ComboBox's disapeared. I tried to invoke mycb.destroy() methods, but there's the same result.
Should I unregister or something like that ComboBox? Why my component is disapearing?
use below code ..
mycb.reset();
mycb.removeAll();
// for loading new data
mycb.loadData("new data store");
// to load attributes
mycb.load({params:{start:0, limit:25, reset:true}});
this is working in my code. Please change as per your need.
Probably a better idea would be to remove the original combobox from its container and add a new one in its place. Also perhaps all you need is to reload the store with new data?
Wrap this combo in panel with fit layout. In onChange handler remove combo from that panel, destroy it (combo), and add new combo to the panel. Having additional panel will give you easy way to put it in right place in the layout.