EXT-JS data association - javascript

Can you associate a component or element in EXT-JS with a arbitrary object?
e.g. store(component, 'key', obj) or get(component,'key');

I am not quite sure about the solution to this question, but you should check #extjs # irc.freenode.net if nothing comes up here. They are very helpful people.
Hope this helps somehow.

I just ran across this old unanswered question while retagging, so for posterity...
All referenced elements and created components are automatically cached in global hashes by the Ext framework. For elements, you would retrieve them like so:
var myEl = Ext.get('myId');
Components are managed by the ComponentManager singleton and retrieved like so:
var myComp = Ext.getCmp('myId');
If you simply want to store an arbitrary reference to an element, component or anything else for that matter, you can do so in any way that you would normally do it generically in JS (store off the var reference directly in application-level scope, store it in an array or hash object, etc.)

Related

What does .$ mean in javascript

I was in the console trying something when i saw that the .$ can be used along with the document object to access the elements. But i don't know what it actually does.
example :-
After some detective work, my guess it is a special Polymer component property:
Automatic node finding
Polymer automatically builds a map of statically created instance nodes in its local DOM, to provide
convenient access to frequently used nodes without the need to query
for them manually. Any node specified in the element's template with
an id is stored on the this.$ hash by id.
I am not familiar with Polymer, and it is very difficult to find (recent) documentation on this property.
However I believe my guess is correct based on the description above and the screen shot below. As you can see, if you add another . after the $ you get a list of suggested properties. These are all ids in the DOM:
I guess that may be any global object under jquery. Exactly, I don't have any experience with .$ but surf the official docs of Jquery, it may help or another possibility is that it is something coming from backend of from database. There may be a lot of reason. Hope, it helps..
This should be a property added to the element but is not anything special.
An example would be like
let a = {};
a.$ = {
b: 1,
c: 2
};
console.log(a.$);
This will also give you the object properties of $ in a.
A bonus fun fact is, in Javascript, emoji is also valid as property name, and therefore
let a = {};
a.$ = {
"😍": 1,
"😎": 2
};
console.log(a.$["😍"]);
also works

Qt.createComponent() with existing imported type

I'm trying to create a component of an existing imported type. While this task seems important enough (say when creating components of types found in your own installed QML plugins) it does not seem to be documented. For example, when trying to create a component of MyObject, the workaround is to create a MyObjectComponent.qml file in the application as follows:
import MyPackage 1.0
MyObject{}
Then a component from this object can be created with Qt.createComponent("MyObjectComponent.qml"), but this method seems redundant. Is there a more concise way? I would expect Qt.createComponent("MyObject") to work, but it doesn't.
Qt.createComponent is specified to take a URL as argument, not a type name, so no, there is no way to use Qt.createComponent(Type). But I still don't get, what could be any benefit of this.
It gives you no flexibility, since there is no QML-Type to pass around types as values.
It gives you no performance benefit, since Qt.createComponent(URL) also uses the engines component cache.
Also there are only few use cases where explicit JS component creation with Qt.createComponent is the right way to go, since QML is a declarative language and most things can be done declarative.
Consider these other ways to create components:
If the a type of a property is Component, you can use standard syntax to create objects. Automatically the object creation stops after the createComponent-step:
property Component someProperty: Item {
// This Item is not instantiated. Instead only a prototpye/component is created
// and bound to the property 'someProperty'
}
Wrap the Object you don't want to fully create yet, in a Component:
Component {
id: myComponent // Use this to reference the Component later.
Item {
// This Item is not instantiated. Instead only a prototpye/component is created
// You can reference it by the *Component's id*
}
}
This can also be used in property assignment:
property var someProperty: Component {
Item {
}
}
TL;DR
No - you can't pass a type to a function in QML, so you can't do it with Qt.createComponent either - especially not, when it is specified to take a URL.
If you still have the feeling that it would be necessary, and any of the other ways to create Components seem to not fulfill your needs, please ask again, and specify what you try to do, and why you think it would be necessary to do so, and we might find a way to solve your real problem.

EmberJS: Update multiple models on save

Looking for some advice on the best way to update multiple models on save. Why might I want to do this, you ask? Well, I'm using Parse as my backend and unfortunately relationships are only one way. In order for them to work in Ember, I need to manually manage pointers.
Example: Obj A belongs to Obj B. Obj B has many Obj As. Parse stores a pointer from Obj B to Obj A, but I need to store an array of objects in Obj B that contains IDs for all of the Obj As. When I go to delete an Obj A, I need to save Obj B with the updated array of As. Currently, I'm doing something like this in my component logic:
ObjA.save().then(() => {
ObjB.save();
});
That seems to work, but I'd like to move this logic to the adapter so I don't have to think about it every time I'm deleting (or adding) a new object.
I was thinking I could find a hook somewhere in the adapter to check if if an object is being deleted. If so, send a PUT request to ObjB with the new list of ObjAs. I just need some guidance figuring out where that would go. Or, maybe the best way is to handle this in each component.
There is didDelete on model so you should be able to do it there. That said, api that does not have integrity check is head scratching.

Am I binding in angularfire (angular+firebase) correctly?

Hi y'all I'm trying out angular and firebase together for some cool 3 way binding action, but I'm running into some problems with binding. I don't really know how the objects ($scope and $firebase) should look like before being binded together. Right now, if I change through firebase, I am able to to see the change in my DOM almost immediately, but I need to be able to do some crud from DOM to FB for some real 3 way binding. Maybe I'm doing this completely wrong. :/
Here's what I have:
html (this creates a huge grid of 400 squares based off of my $scope.myGrid which is a $scope object referencing a $firebase object)
<div class="square" ng-repeat="(position, hex) in myGrid" style="background-color:{{hex}}" ng-click="squareClick({{position}})">
my Controller (anonymous fxn makes my $scope.myGrid object.)
$scope.paletteColor = "#f00";
//FIREBASE
var ref = new Firebase("https://MyAPP.firebaseio.com/");
//angularfire ref to the data
var sync = $firebase(ref);
//download the data into a local object
var syncObject = sync.$asObject();
console.log(syncObject); // firebase object is composed of root node with 400 child nodes with key:value like 01-01:"#f00", 01-02: "#ff0" which is exactly how my $scope.myGrid object looks like
$scope.myGrid = syncObject;
// binding Part taken from the docs which is a huge mystery to me.
// syncObject.bindTo($scope, "myGrid").then(function(){
// console.log($scope.myGrid);
// $scope.myGrid. = "baz";
// ref.$set({foo:"baz"});
// });
You do need to use the syncObject.bindTo syntax as you listed in the comment. This sets up the three-way binding. See this note from the official documentation below:
While 3-way bindings can be extremely convenient, be careful of trying to use them against deeply nested tree structures. Stick to practical uses like synchronizing key-value pairs.
If you need more functionality than basic key-value pairs you may want to look into extending Firebase factories. You can find it in the documentation at https://www.firebase.com/docs/web/libraries/angular/guide.html#section-extending-factories.

What is a reverse reference to the DOM object?

In this link: http://css-tricks.com/snippets/jquery/jquery-plugin-template/ it has a line of code that says
// Add a reverse reference to the DOM object
base.$el.data("yourPluginName", base);
what does the "reverse reference to the DOM object" mean?
Assuming that you know the jQuery data function:
It's storing a reference to the instance of the class in the data cache of jQuery, meaning that the stored instance can be used to access the initial base object if it in the current context is not available.
This way, the class instance can be used later. However, the use of the prototype keyword upon the initial class that the instance were created from will modify the instance.
EDIT:
Ooops, it seems that Anurag is right, and I was giving wrong information.
Sorry, the information I gave in initial answer was not completely correct. I've updated the answer, so it now tells the truth.
In the comments you're asking:
so you mean its storing the current state of "base" in the data cache but if we make changes to "base" later on then the one in the data wont be affected? so if for some reason we needed to get the original one again we can do data('yourPluginName') to retrieve it? can you give me an example of when this would be helpful?
It seems that none of the statements are correct.
As I did obviously not remember adequately, the thing stored in data is only a reference to the object:
var obj = {};
obj.hello = "Hello";
$("#someElement").data("object", obj);
obj.world = " world.";
alert(
obj.hello +
$("#someElement").data("object").world
); // alerts "Hello world."
BTW, JavaScript variables with names like this base-thing (but, more often seen as that or similar) are typically used to represent the current context, accessed through the this keyword, which on many occasions is more easy to store in another variable due to scoping/context changes, that will make the current context and therefore this, change.
Also due to issues with context, the stored value in data could be used to access the specific object instance from another context (that is, when this represents something else), instead of the version of the base object that was continually used after a copy of it was stored.
I hope this answered you questions :D
The technique and the problem it solves is general and not specific to jQuery plugins. There may be cases where a Javascript object corresponds to a DOM element, and wraps logic specific to that DOM element. This object might be interested in listening to events such as clicks that happen within that DOM element. The information we get in those callbacks is the element that triggered it, and not the associated object. You could use jQuery's data API or any type of map in general to retrieve the corresponding object, and do something with it.

Categories