Angular Polymer data-binding - javascript

I want to make two way data binding between Polymer and Angular, for this I am using Angu-poly library.
Here is a link to an example which is working, while passing strings via name and age attributes: working.
<x-kid bind-polymer ng-repeat="kid in kids" angupoly="{name:'kid.name', age:'kid.age'}">
</x-kid>
But when I try to make it with passing an object via kid attribute, it seems that something goes wrong, here is the link: not working.
<x-kid bind-polymer angupoly="{kid:'kid'}">
</x-kid>
What should I do to make it work?
Update:
Also tried it with this library and it didn't work. the code will look like this:
<x-kid bind-polymer kid={{kid}}>
</x-kid>
Big Update:
Here I made some progress tweaking the "angular-bind-polymer" library. For now I am able to bind objects from outside polymer into polymer, here is the updated plunker. The problem now is to do this in the other direction.
Note: I am getting some exception from angular side, take a look maybe you can help to solve it. I think we are very close :).

Here is an updated example http://plnkr.co/w1icAU
With Polymer 1.0 two way binding is much simpler and also able to bind objects not just string values.
Here is the main part
<x-kid ng-repeat="kid in ::kids" angupoly="{name:'kid.name', age:'kid.age'}"></x-kid>

I think it is because of some kind of reference.
How should I explain, just like you work with object in scope in data binding. when you update the object to a new object, the UI will not update with new object values.

It looks that Material Design is THE answer, excerpt:
Our goal is to deliver a lean, lightweight set of AngularJS-native UI elements that implement the material design system for use in Angular SPAs.

Maybe you could find clues from this blog even if its aim is for dart:
Angular and Polymer Data Binding, Together!

Also take a look at ng-polymer, this project may help give you some insight

Related

How to start building a Custom Component in Formio.js? Where are docs?

I am trying to get a custom component working in Formio.js. I would love a complete, nontrivial working example.
I am not using angular, ng, react or the form.io service.
The documentation is terrible. I can copy out the Checkmatrix example code and run it (after much fiddling) but even it doesn't work correctly: in the formbuilder, the edit and delete controls don't show up. (There an bug issue open on this, but no resolution, which is distinctly worrisome.)
There are dead links all over the SDK reference documentation.. like for example for "Component" which seems particularly important.
There is no documentation of any of code used by the example. For example, it uses the 'renderTemplate' call, but the arguments are not described anywhere.
It appears that the only way to understand any part of this system to try to figure out all of the source code. There are no instructions for adding code.
It's not even clear what the best way to proceed is: whether I should fork the formio.js repo, learn TypeScript, and add components directly (creating a hassle if I ever want to keep formio.js up to date) or continue trying to work by registering components from add-on scripts in the browser.
** Can anyone give concrete advice on the best way to go? **
#nathaniel Tagg I couldn't find form.io proper form examples, so i would like to see your form.io examples if you are like to provide. Here is my email 'udara#staff.medicalwizard.com.au'

Jquery plugin Vs javascript

Can somebody please explain the pros and cons for below.
Am having a function to get the url querystring parameters, but I need to know which is the best way to write the function. Eg: if i create the function using jquery plugin style, then every time I need to use a target element to access the function as below
$("#targetDom").getQueryString("name");
However, if I create the function using javascript classes or javascript design pattern, it would be
getQueryString("name");
This is a small example but considering large application which approach is best? is there any disadvantage in going with jquery plugin way?
Regards,
Navin
I found a while ago this sentence:
Don't learn jQuery. Just use it.
It's one of the best advices for a newbie, I think.
jQuery is just an addition to javascript. It simplifies DOM traversing/manipulation, makes easy event handling and so on, but it is not something you should start learning before you know vanilla Javascript.
Regarding your example, it is not the best thought example for jQuery plugin.
The syntax you suggested ($("#targetDom").getQueryString("name");) implies that you treat URL query string as attached somehow to the HTML element, which is wrong...

ExtJS 4 Problem with MVC concept

i'm trying to use the new MVC concept and therefore started witht the AccountManager Example (examples/simple). Everything works fine as far as I stick to the tutorial, but I tried to extend it a bit.
I define a border layout in 'Viewport.js' and assign a header component (views/Header.js) to 'north'
and a tab-Panel (views/MainPanel.js) which contains the 'views/user/List.js' as a tab.
Until now everything is ok.
But now i added another store (Profiles.js) and model (Profile.js),
changed the references in code to use profile-store instead of user-store.
I also updated the column-definition, imports ('requires') and everything es that is relevant(at least i think so...).
When i run my app i get a js-error in Observable.js -> addManagedListener-> 'item is undefined' when he tries to invoce the on-method of 'item'.
At first i tried hard to find the mistake i made in the code but I could not find anything,
so i started to play around a little bit and found out,
that it works as soon as I rename the folder 'user' in views/ to 'profile' (of course i had to fix some references in code too).
Is this behavior a bug or is it volitional?
If so can anybody please tell me how this is exactly working?
Thank you very much!
ExtJS looks for the Javascript files based on your model/view/controller declarations.
i.e. if in your tell your controller that you have a store called Profile (via the stores attribute) by default, it is going to look for a file at app_name/stores/Profile.js
The problem was that i had to give my controller a reference to the store and the model.
I didn't do that from the beginning, after my controller had a reference to the view, the view had a reference to the store and the store had a reference to the model.
So I assumed everything is ok.
But it seems to be mandatory to provide this information redundant as far as understand and i can live with that...

Django template implementation in javascript?

Does anyone know about an extensible django template implementation in javascript. I don't need all the advanced features, but loops, tags and filters would be nice.
I found a few projects/hacks just implementing the variable style but that's not enough for us.
The one that came closest is: http://code.google.com/p/jtl-javascript-template/ but it's not very well written/complete/maintained.
Check this : http://icanhazjs.com/
And here how it can work with django : http://tothinkornottothink.com/post/4282971041/using-jquery-templating-icanhaz-js-with-django
Another option is to use mustache.js and pystache. It would require some changes as the feature set isn't as powerful as Django templates but it does provide fair amount of freedom.

Displaying fancy routes in cloudmade based service

I look for a way to display a route in a fancy way using the Cloudmade service.
Currently, I can see computed routes like on this tutorial http://developers.cloudmade.com/projects/web-maps-lite/examples/routing, but I look for a fancier way to do it -- without A and B tags, and with colors, etc.
Is this possible ?
Thanks for your help
Rob
Currently this is not possible unfortunately, the only way to do this is to use the NavEngine API directly and process the JSON responses manually. But we will think about making the CM.Directions class more configurable in future releases, thanks!

Categories

Resources