I want to use indexedDB with lit-element. To do so, I imported #polymer/app-storage/app-indexeddb-mirror in my lit-element project.
A copy of my code is here.
The value in the data attribute is not saved to indexedDB. No error is thrown.
Is there any incompatibility between the #polymer webcomponents and lit-element ?
Since <app-indexeddb-mirror> is just a web component, you can use it's API in any DOM-friendly library, including in lit-html.
For example:
render() {
return html`
<app-indexeddb-mirror
key="indexKey"
data="${this.data}"
#persisted-data-changed="${this.persistedDataChanged}">
log
</app-indexeddb-mirror>
`;
}
Note that lit-html has a different syntax for binding event listeners to element.s whereas with Polymer templates, you might add an attribute like
static get template() {
return html`<input on-change="methodName">`
}
With lit-html, the syntax for binding an event listener uses # in place of on-, and does not automatically dash-case your event names, so you could use:
html`<my-el #eventName="${referenceToFunction}"></my-el>`
where referenceToFunction is a direct reference to the event handler.
Note also that you don't need to create a lambda expression to pass the event to the instance method, since lit-html will auto-bind that function for you.
That all being said, consider using something like KV-Storage, idb or idb-keyval for simpler cases, as you'll end up shipping much less JavaScript to your clients that way, since you won't have to shlep along the entire Polymer library with you.
Related
I would like to create a global function called "translate". As i know, i can define global variables and their values in the app.module.ts file. So i tried following code:
export function translate(string) {
// i am not sure if it would make a difference if i would use var
let ts = new TranslateService();
return ts.get(string).subscribe(res=>{
return res;
});
}
So maybe i try to use the wrong class, maybe the mistake is somewhere else. I use the ngx-translate Module (and it works great). Instead of always declaring to use the "TranslateService" (in every class where a translation is needed), i want to have a global function, where i can access the translations via only a function (i do not want to call another class...). You can see the code that i do like to use in the global function at the very end of the link (ngx-translate)
Thanks in advance.
global means for me, that something is accessible everywhere in the project.
I think thats a very bad idea, even if you get it to work somehow by some messy hack thats not the way this is intended to work.
TranslateService is already a service you can inject in every class you need it. And injecting a service using Angulars dependency injection is the intended way to use it. If you are afraid that there will be multiple translate services in the end - don't worry, Angulars dependency injection system takes care of that.
I guess you want to do this because you always have to write public translate: TranslateService in your constructor. But if you export a function in your app.module you have to import it again in your class, so you will have to write import { translate } from 'path/to/app.module/translate'; instead every time.
I am a fresh man, using play2.0 framework. Now I have a trouble to use xxx.scala.html. In Eclipse I added a xxx.scala.html, but I cannot use "xxx.render()" function to render my html.
Now I create a form1.scala.html in view package. I want to render this html in controller like this "return ok(form1.render());". But it cannot. Why I cannot?
I have checked Play-Sample(example: 'form' application). In this application controller class, he used form1.scala.html, form2.scala.html, summary.scala.html and so on defend by himself.It's Ok. But I cannot use like this.
views is a regular Scala/Java package, but when the template compiler runs it adds a 'html' package under that which it places the compiled templates in. So the source app/views/myTemplate.scala.html results in the function views.html.myTemplate
The view templates are functions themselves, not classes or objects, the filename becomes the function name, there is no render() method.
So if you have the file app/views/myTemplate.scala.html you will be able to use it like this:
Ok(views.html.myTemplate())
or
import views.html.myTemplate
Ok(mytemplate())
I'm After several days learning angularJS through converting my standart JS app to a ng one.
I was wondering about this simple scenario:
I have a global function called fb_connect(),
it can be used from any page (or any controller if you like) to make a facebook-based login.
This function makes a simple http call and receives a JSON object contain data to move on (display a pop up, login, etc...)
I read that I can define a Factory or a Service for my app and use it in any controller, which works fine.
So, I created a fb_connect factory function.
The problem is that now, in every page (every controller), I have to define that fb_connect in the constructor of every controller - for example :
function welcome($scope,fb_connect){});
What is the proper way to do this kind of actions using Angular without having to define these functions each and every time in every controller?
Thanks
Setting up factories and services is all part of the dependency injection system of Angular. Using that system is great when you need to create things that depend on other injected things. It's a big tree of dependencies. It's also nice for creating singletons, such that everywhere in your code end up using the same instance of some object.
It sounds to me like neither of these benefits apply in your case. I'd suggest just not using Angular's DI for it. You have some function defined globally, just call it directly and skip the DI. There's nothing wrong with that.
Of course you say it makes an Ajax call, so doesn't depend on the Angular $http service?
Your two options are:
Declare the function on the $rootScope
Inject it as a service
My advice is to go with making it a service. The whole purpose of services is explained in the Angular.js docs, just like this quote:
Angular services are singletons that carry out specific tasks common to web apps... To use an Angular service, you identify it as a dependency for the dependent (a controller, or another service) that depends on the service.
As you mentioned in your question, you'd prefer to not define the service in every controller you wish to use it in. With $rootScope you'll be injecting that also in every controller. So really it's a question of which you prefer, although to answer your question, the proper way of using a factory or service is to inject it into the controller you wish to use it in.
You can always put it in the $rootScope
myApp.run(function($rootScope, fb_connect){
$rootScope.welcome = function(){
};
});
I am trying to use Mootools together with TypeScript. Mootools, and some modern browsers support .bind method, which is polymorphic.
How can I properly declare this feature in a *.d.ts file, to be able to use constructs like [1,2].map(this.foo.bind(this)); ?
I know I can avoid such constructs by using lambdas, but sometimes I do not want to.
Perhaps there is a mootools.d.ts file somewhere which I could download instead of reinventing it myself?
TypeScript's lib.d.ts already defines the bind function's signature in the Function interface as follows:
bind(thisArg: any, ...argArray: any[]): Function;
I don't think there's any better way of doing it until generics get added to the language.
For the time being though, if you want to use bind and the recipient of the resulting function expects a specific signature, you're going to have to cast the function back to that signature:
var bfn : (p: number) => string;
bfn = <(p: number) => string> fn.bind(ctx);
There's a growing list of definition files being tracked here.
As for generating methods pre-bound to their this pointer in TypeScript I've suggested two ways of doing this. 1) a simple base class I defined at the end of this thread. and 2) a more advanced mixin & attribute system here.
Basically, I want to modify the constructor of the Object
class. Since every class extends Object, I hope whenever any
object of any class is instantiated, the modified function will
be called.
So I did this :
Object.prototype.constructor = function (){
trace("it was called;");
};
and put a breakpoint on the trace statement.
But it didn't stop there.
The trace statement did not get executed also.
Any solutions/suggestions?
In which context are you coding?
If you're using the Flex Compiler MXMLC (default, if you're in FlashBuilder), than you could add the compiler option -es. This should make AS3 feel more like AS2 and JS and support the prototype chain inheritance.
-compiler.es alias -es
"use the ECMAScript edition 3 prototype based object model to allow dynamic overriding of prototype properties. In the prototype based object model built-in functions are implemented as dynamic properties of prototype objects. (advanced)"
I don't know, if this plays well with all the extensions Adobe added to the ECMA Script standard, like packages, namespaces and classes. But you could give it a try.
I don't think it's possible in AS-3, but it was in AS-2.