I'm using Vue.js to build ui for my html5 game. I have a case where I want to define ui-containers which essentially just group other ui-components and position them to somewhere on screen. So I could have something like this going on:
<ui-container>
<ui-component1></ui-component1>
<ui-component2></ui-component2>
<ui-component3></ui-component3>
</ui-container>
Where I need to add and remove those components dynamically based on data-model which represents the content of the container. The problem is that I'd like to keep ui-container generic, so that I can append any Vue-component to it without having information in template about which components there might be.
I googled and found this example which concerns injecting components dynamically: http://forum.vuejs.org/topic/349/injecting-components-to-the-dom
While the data-driven version in example was easy to make and understand, it uses v-for for tag and therefore requires one to know before hand the type of child-component.
So question is, how I can generalize that example to work with any component dynamically? Should my data-model have the type of component or tag name of it and then interpolate it in v-for? Or is there existing mechanism for this kind of requirement?
You can use special is attribute to dynamically set the type of a component. Here are the docs. The code will look somewhat like:
<div id="app">
<div v-for="component in components" :is="component.type" :value="component.value"></div>
</div>
Working fiddle to play with: Dynamic Vue.js components
Related
It seems to me like the x-on directive does not work without the presence of an x-data directive on a parent element.
For example, the below does not work
<button
x-on:click='console.log("hello")'>
left
</button>
It needs to be converted as following for it to work
<div x-data="{}">
<button
x-on:click='console.log("hello")'>
left
</button>
</div>
If I am understanding it correctly and an x-data directive is necessary, why would it be that way?
The x-data directive is required because of the main philosophy of Alpine.js framework.
With a full SPA (single page application) framework, like Vue.js, the main index.html file usually has only a single empty element inside <body>, like <div id="app"></div>. Then we mount our Vue.js application to the #main element and Vue.js takes over the entire frontend. After that by default everything is assumed to be a Vue.js component, like <MyComponent :some-data="42"></MyComponent>, so we don't have to mark them in any other way.
However, Alpine.js follows a different path. It is not intended to be a full SPA framework, like Vue.js. Its main purpose is to "enhance" frontend markup code generated by a backend framework like Django/Laravel/etc (the author of Alpine.js, Caleb Porzio, is the author of Laravel Livewire). So here by default a <button> element is assumed to be a normal button, not an Alpine.js component, therefore Alpine.js does not scan it for Alpine.js specific attributes, like x-on. We have to add the x-data attribute to an HTML element like <button> to mark it as an Alpine.js component. After that Alpine.js scans for directives as such, and takes over the handling of the marked element. This method works well with backend frameworks, where we usually only want to make some elements interactive on the frontend with Alpine.js, but any other logic is handled by the backend.
Nevertheless, if you want you can add an empty x-data attribute to the main <div> element in your markup, that makes Alpine.js work as an SPA framework, so it will scan every element for Alpine.js specific attributes. That's totally fine if you want to use Alpine.js this way. But usually we can define smaller, reusable components, so we put the x-data={} attribute to the specific element or to closest ancestor of the element.
I have a div tag and I want to append the angular material form fields inside that div. The problem is it's not rendering that tags. Can we do this using any method?
enter image description here
The angular way is has an array of object, e,g.
data=[{placeholder:"Enter Name",label:"Name"},
{placeholder:"Enter surname",label:"Surname"}]
and make some like
<mat-card *ngFor="let item of data">
<div class="row">
{{item.label}}<input mat-input [placeholder]="item.placeholder">
</div>
</mat-card>
When you are using angular, never manipulate the DOM manually (via native DOM APIs or jQuery).
When you are using a component or a directive in an angular template (ie. the html of your component), that is not real html, that is transformed to javascript. So when the application is running, where you wrote <mat-car> in you template and you also see <mat-card> in the DOM, that was actually put there by the code generated by angular, but a lot other things also happened (ie. the mat-card component was initialised).
When you just put the components selector manually into the DOM, nothing will happen, because the component is not initialised. To make it work, you have to use the material components from another components' template. Further reading: https://angular.io/guide/architecture-components
Suggestion: don't even import jQuery into the project at all, that way you won't even be tempted to do this.
I am using VueJS 2 to build a drag-and-drop layout builder. One of the requirements of that project is to be able to have some components that will allow for custom content to live inside (they will be just a wrapper around that content). And to be really concrete, I am trying to pass in and render another drag-and-drop zone which is implemented in a draggable component.
Basically, I want to pass a VueJS template to the component via a prop and have that template rendered inside of the component. This is necessary because I do not want the UI to limit the needs of the developer and therefore need this to be really extensible.
In the following trivial example I would like the "ui-element" to render the content prop inside of it and use the other prop as a data input.
<ui-element
:content="<draggable :name="contentData"></draggable>"
contentData="col1"
>
</ui-element>
Since just outputting the template will escape it, and v-html directive will treat it as regular HTML and not a template I am lost, not really sure how to get this done.
I spent about an hour or more googling but no luck. Which leaves me to three options:
1) I'm the first one to need this complex use case (unlikely)
2) Doing this is stupid on so many levels that no-one even bothered (if so, please let me know how to get this result in a smarter way)
3) There is a special uber-cool JS term for this which I simply do not know and that made my search attempts futile
You'd want to use slots instead.
In your ui-element component, define a slot like so:
<template>
<div>
<slot name="content"></slot>
</div>
</template>
Then you could pass in the draggable component like so:
<ui-element contentData="col1">
<draggable :name="contentData" slot="content"></draggable>
</ui-element>
Here's a very basic fiddle example of a slot.
I'm a Polymer novice, but I guess what the answer will be...
Recently I came across with this issue: I got to loop through a collection of elements (using dom-repeat) and display its contents. But every element has a unique display and bindings, making it almost impossible to display each element dynamically. The ideal scenario would be to load a different component for each display type, but it looks like there is no easy way to achieve this.
Some options I have been thinking of were the following:
Using dom-if but it would add crap to my resulting HTML.
Is there a dom-switch? If it were something like that and didn't leave empty template tags (as it would do with dom-if) it would be nice.
It's possible to load a component dynamically? Using something like this: <[[item.type]] item-configuration=[[item.configuration]]></[[item.type]]>
Any other ideas? I would really appreciate any ideas or solutions or at least a workaround for my issue.
TL;DR; you can't
Polymer (and Web Components in general I guess) are best when used in a declarative way. Out-of-the-box your best solution is dynamically creating elements and adding to DOM or messy use of dom-if.
(potential) OPTION 1
I guess you could fairly easily implement a dom-switch element to work like
<template-switch switch="[[some.value]]">
<template-case case="10">
<element-one></element-one>
</template-case>
<template-case case="20">
<element-two></element-two>
</template>
<template-default>
<element-one></element-one>
</template-default>
</dom-switch>
I wrote this off the top of my head. There are multiple ways to implement such an element. A crucial decision is whether to use <template> internally or not. In this plunk I've implemented such element without templates but simply using content distribution.
OPTION 2
There is also Polymer.Templatizer.
Faced with a similar issue of choosing element to render dynamically I created this Plunk as a proof of concept.
As you see, you extend the <template> element with custom rules, which match against a model. You then bind the matched template's nodes with the model using Polymer.Templatizer.
Thanks to Templatizer, you don't have to pollute your actual element with conditionals and still get full binding functionality.
I'm working on a more feature-complete solution. If you're interested I could move it to a separate repository and publish.
I am new to react.js and I have heard that this js library reacts badly to anything that modifies it's component structure.
Is there any specific procedure to add content into react elements using Jquery. For example, if we want to add content into react's div field, can we directly use Jquery append method to insert text to that div or is there any other way to implement things?.
The idea is that you either use a traditional approach, or you ditch jQuery and use react and this means using the react rendering tree, probably build tasks, client-side router/SPA.
You should not modify the DOM generated by react components from outside it since it maintains an internal state and a virtual DOM that would become out of sync. You either use one ecosystem or another; they are two very different approaches to writing a website.
If you want to introduce react on a small part of the website first, I would suggest to gather all your data with jquery and then transmit the data into the react component.
Roughly
// gather data with jquery or whatever
var data_array = gatherData();
ReactDOM.render(<MyCustomComponent data={data_array}/>, $('#my-react-root')[0])
Rendering changes during runtime can be managed the same way. Just gather the data again and change the state of the react component accordingly.
If you don't want to extract the data or the html is to complex, you can use dangerouslySetInnerHTML to just path a plain text html string.
From the docs:
<div dangerouslySetInnerHTML={{__html: getMarkup()}} />
Best wishes
Andreas