How to do reusable component in ejs with attribute? - javascript

I am experiencing difficulty understanding the implementation of a component in EJS that utilizes attributes. Could using custom elements be a viable solution to this problem? I have attempted to research this on the internet but have been unable to find a clear solution for adding attributes in this manner, such as

Related

Is it possible for Vue Web Components to have listeners or interact some other way?

I am trying to develop multiple Vue.js components written as .vue single file components. The requirements is that such components need to be embedded by front-end designers directly into HTML using element.
Since i cannot achieve this with default compilation method provided by webpack, i figured out it could be done by compiling (more correctly, transpiling) as web components.
Is it possible to use Vue Web Components with listeners as you would with regular Vue Components?
<some-web-component #some-event="someFunction()"></some-web-component>
I couldn't find any examples of this, all which i found had only a simple component with some props, displaying a message. Is this even possible?
If not, is there some other way to achieve communication between Web Components?
Similarly asked here:
https://forum.vuejs.org/t/using-vue-single-page-components-directly-in-html/66384
For anyone wondering the same, I've found the solution to be using Vuex store.

angular vs vanilla javascript vs jquery, should I use only one of them?

I did all my javascript on front-end in angular.
My app is not single page application.
I do not have any routing. I just needed something so my user interaction does not depend on ids or class names of html elements.
With this approach I do not depend on html/css coders. They can do what ever they want without making impact on my javascript logic. But some part of my project I have to do something like this:
var pos = $(".two").find(".active")[0].offsetLeft;
$(".two").scrollLeft(pos - 40);
Even that is only two lines of code I am hating that solution because I depend of some elements with class names .two and .active.
I am not asking how can I do that two lines in agular but wondering if
there is some framework or javascript lib that can deal with stuff similar to angular:
Directives
Services
Factories
Filters
Most of my, lets say user interaction is done via directives. Most of my logic for example google maps are done via angular directives and angular factories. All of my filters (for example format date is done via angular filters). And at the end all of my ajax calls are done via angular services.
With this approach I have solved major problem and that is code usability (sort of modular approach) then I solved big issue with maintaining code. Anyone can work on this project after me without having to scratch his head for two months in javascript code.
I am having but one issue and that directives are slower then if they are written as pure javascript. When I say slower I mean there is some strange timeout (like 200ms) when html is rendering via directive.
Anyway I would really appreciate some input regarding angular vs plain javascript or jquery, should I mix it or should i do my javascript in angular (or some other framework) only.
Thanks.
I just recommend you try vue.js ,maybe you can check the comparison between react,angular and vue in https://www.awesomes.cn/vs/10-65-447

How to use knockout.js with CMS?

All the examples at ko.js site are build manually and models and views are handcrafted.
What if I want to use ko.js on site that doesn't create data-binding attributes in the backend? Is it possible to apply bindings dynamically in document?
Otherwise it seems like ko.js would support only custom projects and not e.g. CMS sites such as WordPress or Drupal (without extensive customization).
Say I have a nice form rendered from CMS that I would like to use together with ko.js to provide functionality. How do I add ko.js to it?
From what I can ascertain from your description, I don't think knockout or indeed any MVVM binding framework is correct for you. It would be good to understand more about what you are trying to do, with some sample code, before we help any further.
The samples over at knockout's page are a little simple, you may want to check out http://www.scottlogic.com/blog/2014/07/30/spa-angular-knockout.html for a more in-depth article with code.

Dynamically created templates with Polymer in a Chrome app

I'm working on a Chrome app which needs to do two main things:
Automatically generate a UI from a list of fields and data types provided by an attached device.
Allow users to define and share their own presentation for the UI and automatically apply that presentation when the device is attached.
I'm using Polymer, and I figure the best way to achieve #2 is with user-provided Polymer elements. Then, I can simply bind the variables from the device to the UI, and the user's template can determine how to display and style them.
Achieving #1, then, is a matter of automatically generating a polymer element from an input schema. This is somewhat different from the usual approach, where I'd presumably define a repeated template with conditional child templates for each type of widget.
My questions, then, are:
How can I dynamically evaluate a polymer element/template from a remote source without violating the Chrome App's CSP, and without introducing significant XSS issues? (Hopefully, the former protects me from the latter?)
What's the easiest way to dynamially generate markup for a Polymer element? Can I define a meta-template and use the generated markup?
I am not entirely sure why you rule out using a pre-defined Polymer element with (admittedly, complicated) <template> logic in it, but if you're sure that you need things to be dynamic and generate the element's content on the fly while still making use of Polymer's data binding, then injectBoundHTML() might be what you're looking for.
It's unfortunately not documented at the moment, but there are examples of how to use it in the open issue tracking the documentation.
You can fetch the "bound" HTML from any source, and while I'm not an expert on CSP, I don't believe that it will trigger any additional CSP consideration.

Can jQuery be used with Ext.js?

After reading some of the jQuery vs ext js questions here and google search result, my understanding is that ext js is a UI building library and jQuery is a more fundamental javascript framework. I've used jQuery for a while now. It's pretty cool but in general a better (much better) javascript.
So my question is: how easy is it to use jQuery for DOM navigation/manipulation and Ext.js for UI in the same project?
There is a page on jQuery website. But the demo is too simple and the external links to Ext.js are all dead.
I'm sure it's possible, but what sort of problems and challenges would I be facing?
You might be wondering why I want to do this. Well, the Ext.js set of UI just looks much better/more polished/more feature rich then jQuery UI. I'm particularly interested in the grid.
Thanks!
Using both libraries side by side is not an issue in the technical way (just add the jquery within a script-tag, that's it!). However, you should not use jQuery for ExtJS' stuff or vice versa. Well, unless you know exactly what you do.
The actual issue can be DOM manipulations (jQuery or ExtJS Core) outside of an ExtJS component that affect an existing component.
So, in a nutshell: You can use DOM manipulations when it will not affect the ExtJS components. Otherwise use the proper way within the component itself.
Well you dont need both the libraries to live together.. Extjs has DOM manipulation api too probably not as vast as jquery but it does have the basic stuff.
Coming to Jquery, jquery has UI building APIs too if not rolled into the library there are vast no of extensions for all kinds of problems. Just try googling whatever UI you are building now with respect to jquery and you will find a library for sure.. There is jquery templates too that lets you generate HTML markup from a template defined by you and applying data objects (json) to it.. Jquery has a vast community too so most of your questios or concerns will be addressed by the community almost instantly..
So yea my suggestion would be to choose one library and stick to it and contribute to the library if there are many missing features..
Lastly I would suggest you choose Jquery.. It rocks.. period..
I think you would have no problem do this stuff... Make Ext.js your main jQuery library and jQuery as the data manipulation library for the DOM.
There would be no problem or conflicts because jQuery is compatible with other javascript libraries.

Categories