I am beginning to learn Polymer 2.0 and I am interested in learning ES6. My question is what is the way to transform this in polymer 2.0? I am just learning english.
Here is the link https://www.w3schools.com/jsref/tryit.aspfilename=tryjsref_element_classname.
For selecting an element inside the "light" DOM you can just us plain javascript
var el = document.getElementById('something');
console.log('Selected Element:', el);
<div id="something">some stuff</div>
For selection inside your polymer 2 shadow DOM you can use
this.$.something or for more complex queries this.shadowRoot.querySelector('div > p:first-child')
Related
Somehow I still can't wrap my head around some core vue concepts.
I have made some simple webpage using phalcon. Created it so, that it would work without JS and now is the time to add some bells and whistles - ajax queries and the like, for the user experience to be better.
I wanted to do everything using vue, to see how it all adds up. But after hours of googling I still can't find solution for the simplest of tasks.
Say: I want to get a text paragraph in a series of <li>-s and change it somewhat. Maybe make excerpt of it and add 'see more' button behind it. Now, in jQuery I would just iterate with each() and perform the tasks. With vue targeting set of DOM elements is much harder for me, probably because of whole paradigm being "the other way round".
I know I could iterate with v-for, but these elements are already in the DOM, taken from the database and templated with volt. I had even this wild idea of creating .js files from phalcon, but it would completely negate my strategy of making functional webpage first and then enhance it progressively.
Frankly speaking I feel like I'm overcomplicating for the sake of it, right now. Is vue even fit for a project like this, or is it exclusively a tool to build app from the ground up?
Vue's templating is client-side, which means if you are delivering an already templated html page (by your backend) there is little vue can still do for you. Vue needs data, not DOM elements to build its viewmodels.
This becomes pretty obvious when building a single page application for example, which would be rendered only on the client-side. You'd simply load the data asynchronously from a backend api (REST for example) and then do all the rendering on the client.
As far as I understand your usecase you want to mix client and server side rendering, rendering most of the non-interactable content using your backend's templating engine and adding some interactivity using vue. In this case you'll need to add some vue components (with their own rendering logic) to your backend template and pass data to that component using vue's data-binding.
Here's an example:
...
<div id="app">
<my-vue-list :products="{% products %}"></my-vue-list>
</div>
...
And in your JS:
var app = new Vue({
el: '#app',
data: {
components: {MyVueList} // You will have to register all the components you want to use here
}
})
Vue provides the ref attribute for registering a reference to a dom element or child component:
// accessible via this.$refs.foo
<li ref="foo">...</li>
Do note, however, that refs are not reactive, as stated in the docs:
$refs is also non-reactive, therefore you should not attempt to use it in templates for data-binding.
I need to display some bound HTML in my app.
In Polymer <0.8 there was injectBoundHTML, in 1 there was Polymer.Templatizer, but what is the best way in Polymer 2?
In Polymer 2 also, you can use Polymer.Templatizer.
Documentation can be found here: https://www.polymer-project.org/2.0/docs/api/namespaces/Polymer.Templatize.
There are few changes on code.
I'm developing an app using quasar framework and Vue js. Initially, I used Drag and drop functionality and linking them with connectors in my web app using jquery UI and jsplumb.
Basically, the jsplumb library is a plugin for jquery and jquery occupies more memory space comparing to Vue js.
So, I thought of using pure Vue js functionalities for my requirement. So is there any Vue js plugins which does following tasks?
1) Able to drag blocks from one container and drop it to the specific location in another container.
2) Able to add endpoints(as provided in jsplumb) to the dropped blocks
3) And able to draw a connecting link between any blocks in the container.
So is there any way of replacing jquery and jsplumb with only pure Vue js and Quasar?
as per documentation: JSPlumb features there's a vue version, but it looks like it's paid.
Also in other part it says "Although jsPlumb has no dependency on jQuery, it also supports jQuery selectors as arguments for elements (vanilla jsPlumb because jQuery's selector object is list-like, ie. it has a length property and indexed accessors)." So you don't need jQuery to use JsPlumb. We got that cover.
Then you can use Draggable which uses vue.sortable as well, for the drag and drop part.
So, what if you already have a bunch of selectors with jsplumb in Jquery? you could replace jquery with this selector method:
window.$ = function(selector) {
var selectorType = 'querySelectorAll';
if (selector.indexOf('#') === 0) {
selectorType = 'getElementById';
selector = selector.substr(1, selector.length);
}
return document[selectorType](selector);
};
Snippet from here: https://blog.garstasio.com/you-dont-need-jquery/selectors/
Hope it helps.
I am new to Vue.js, coming from AngularJS 1. Does anybody have tips on how to implement a loading screen such as PleaseWait?
I also created an example that integrated with PleaseWait.js
http://codepen.io/CodinCat/pen/ZeKxgK?editors=1010
Since PleaseWait.js manipulates real DOM directly, the code becomes a little bit tricky. I'd recommend to re-implement this library in Vue.js. Vue does have transitions: https://v2.vuejs.org/v2/guide/transitions.html
You can just create a component for it, and use v-if to hide/show it
<loading-screen v-if="isLoading"></loading-screen>
A very simple example: http://codepen.io/CodinCat/pen/MpmVMp
I'm coming from Polymer and am wondering if and how Aurelia supports Shadow DOM and related features that Polymer supports. I see mention that Aurelia supports Shadow DOM v1 slots, which works fine, but I can't enable Shadow DOM - I assumed that there was a Polyfill since v1 isn't implemented yet, or something like the Polymer Shady DOM?
My main interest in Shadow DOM is style encapsulation. Polymer allows styling of the generated container element using the :host selector from within the template - does Aurelia allow something similar?
<template>
<style>
:host {
display: block;
}
</style>
</template>
Also, is there a polyfill for CSS variables, like Polymer (essential for Shadow DOM)?
After some digging - Aurelia only supports Shadow DOM V1 via native browser support (apart from slots), so even if you enable Shadow DOM support nothing happens because browsers don't support it yet.