I'm new to Svelte and it is very likely I'm missing something here.
I'm using sveltestrap and svelte-spa-router.
When I try creating a <Button> (from sveltestrap) and using the link action (from svelte-spa-router) like this:
<script>
import { Button } from 'sveltestrap';
import {link} from 'svelte-spa-router';
let myLink = '/foo/bar';
</script>
<Button use:link={myLink}>
Click here
</Button>
I get the following error:
[!] (plugin svelte) ValidationError: Actions can only be applied to DOM elements, not components
My expectation was that somehow (??) the <Button> would 'pass down' the use:link to the child html node.
Is there a best practice for this type of situation?
Since you're using a button component, you might want to change your code to use push rather than link in the on:click event.
<script>
import { Button } from 'sveltestrap';
import { push } from 'svelte-spa-router';
let myLink = '/foo/bar';
</script>
<Button on:click={() => push(myLink)}>
Click here
</Button>
Related
I have a set of form fields that are in a dynamically created component. The parent Component owns the form tag. However, none of the form fields are being added to the Form. I'm using the ComponentFactoryResolver to create the component:
#Component({
selector: 'fieldset-container',
templateUrl: './fieldset-container.component.html',
styleUrls: ['./fieldset-container.component.scss'],
entryComponents: ALL_FIELD_SETS,
})
export class FieldsetContainerComponent<C> {
fieldsetComponent : ComponentRef<any> = null;
#Input() formGroup : FormGroup;
#ViewChild('fieldSetContainer', {read: ViewContainerRef})
fieldsetContainer : ViewContainerRef;
#Output() onComponentCreation = new EventEmitter<ComponentRef<any>>();
constructor(private resolver : ComponentFactoryResolver) {
}
#Input() set fieldset( fieldset : {component : any, resolve : any }) {
if( !fieldset ) return; // sorry not right
// Inputs need to be in the following format to be resolved properly
let inputProviders = Object.keys(fieldset.resolve).map((resolveName) => {return {provide: resolveName, useValue: fieldset.resolve[resolveName]};});
let resolvedInputs = ReflectiveInjector.resolve(inputProviders);
// We create an injector out of the data we want to pass down and this components injector
let injector = ReflectiveInjector.fromResolvedProviders(resolvedInputs, this.fieldsetContainer.parentInjector);
// We create a factory out of the component we want to create
let factory = this.resolver.resolveComponentFactory(findComponentForFieldset(fieldset.component));
// We create the component using the factory and the injector
let component : ComponentRef<any> = factory.create(injector);
// We insert the component into the dom container
this.fieldsetContainer.insert(component.hostView);
// Destroy the previously created component
if (this.fieldsetComponent) {
this.fieldsetComponent.destroy();
}
this.fieldsetComponent = component;
this.onComponentCreation.emit( this.fieldsetComponent );
}
}
The template:
<div #fieldSetContainer [formGroup]="formGroup"></div>
The usage of the dynamic component:
<form class="form" #omaForm="ngForm">
<div *ngFor="let fieldset of page?.fieldsets">
<fieldset-container [fieldset]="{ component: fieldset, resolve: {} }" (onComponentCreation)="onComponentCreation($event)" [formGroup]="omaForm.form"></fieldset-container>
</div>
</form>
I suspect it has something to do with the injector not being hooked up correctly, but from what I can tell it is chained to the parent. I've set a breakpoint in NgModel and it is passed a null for parent which is the problem. I traced that back up into something that looks compiled and it was just hard coding a null. So I'm not sure how that was created with hard coded nulls in there.
Any ideas on how to fix this?
Ok it turns out it has nothing to do with the dynamic nature of this component. I removed it and defined all of my components inline and it still had the problem. The issue was that having form controls inside a Component that were nested within a form tag is just not supported by Angular out of the box. Once you nest a form control in a component it can't see the NgForm anymore which is crazy.
After reading solutions on the web and seeing that no one had a good solution I designed 2 of my own directives that registered the Form into the DI container up at the NgForm, then using DI hierarchy I could inject that into another Directive that would perform the registration below.
Parent Component Template:
<form nested>
<my-component .../>
</form>
Child Component Template:
<div>
<input name="street" [(ngModel)]="address.street" required nest/>
<input name="city" [(ngModel)]="address.city" required nest/>
<input name="state" [(ngModel)]="address.state" required nest/>
<input name="zip" [(ngModel)]="address.zip" required nest/>
</div>
Once I had this in place then I could bring back my dynamic component and it worked perfectly. It was just really hard to get there.
It's really elegant and simple and doesn't require me to pass the form instance down through the layers like so many suggestions on the web show. And the work to register a form control whether it's 1 layer or 999 layers removed is the same.
IMHO NgForm and NgModel should just do this out of the box for us, but they don't which leads to complicated architecture design to accomplish moderately advanced forms.
<script>
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++)
{
a[i].onclick=function()
{
window.location=this.getAttribute("href");
return false
}
}
}
</script>
<a href="link.php" data-target="#ajax" data-toggle="modal"><i class="fa fa-binoculars">
i use this code for iOS webapp and affect all 'a tag', but this code blocks proper operation to bootstrap modal. how can i this code except for modal?
I had an exact same issue and the solution was dead simple.
change your <a> tag to <div>. that's it.
like this:
<div href="link.php" data-target="#ajax" data-toggle="modal"><i class="fa fa-binoculars">
the script works only on <a> tag, so you can avoid the modal action by change the tag different to <a>...
Trying to dynamically add polymer elements
on the click event not able to add the element
tried using initPolymer (resulting in stack error :element already initialized)
4 files.
item.html
<polymer-element name="init-item" >
<template>
<input type="image" src="button_minus_red.gif" on-click="{{remove}}">
{{Name}}
</template>
<script type="application/dart" src="item.dart"></script>
</polymer-element>
item.dart:
import 'package:polymer/polymer.dart';
#CustomTag('init-item')
class Item extends PolymerElement{
#observable String Name='hello';
void remove(){
Name='';
}
PlayerItem.created(): super.created(){}
}
index.dart:
import 'package:polymer/polymer.dart';
import 'item.dart'
// getting unused warning for item.dart
main() async{....
//init moved to main
initPolymer().then((_) {});
}
//adding to form element on click event
Code to run(click event)
{ //onReady added here
Polymer.onReady.then((_) { yourPlayer.children.add(new Element.tag('player-item')) ;});
}
tag added to index.html and also dynamic addition as shown above.
Due to above changes when page reloaded was automatically getting custom element included.
Removed the element form the index.html
works as expected (no Errors)
Previous error:
when used initPolymer
element added in place of tag and also within form.
on subsequent click events added within form but stack error(initialization already done)
Are there any issues due to async(highly false)? How should I approach this?
item is not a valid Polymer- or Custom Element name. It is a requirement that custom elements must have a dash in their name like my-item.
At the top of your question you write about a click event but the code example at the bottom shows you're doing it from main().
This two things are quite different.
If you call the code in the click handler of a Polymer element it should just work.
If you have a custom main you need to ensure Polymer is initialized properly before you instantiate elements.
See https://stackoverflow.com/a/20982658/217408 for more details.
import "package:polymer/polymer.dart";
main() {
initPolymer().then((zone) => zone.run(() {
Polymer.onReady.then((_) {
var yourPlayer = querySelector('#people');
yourPlayer.children.add(new Element.tag('player-item'));
});
}));
}
i dynamically generate this html code to delete an item with an id=3 for example:
"<a href='javascript:delete('" + item.id + "')>";
when i click this, it will execute delete('3');i change it as:
<a href='#delete' data-rel='popup' data-position-to='window' data-transition='pop'>
and add a dialog for this tag:
<div data-role='popup' id='delete'>
<a href='javascript:delete(item.id)' data-role='button'>delete</a>
</div>
how to transfer the item's id to this popup dialog's tag, any suggestion?
I feel like you might be going through the wrong way to achieve this. Some things to change :
delete is a JavaScript keyword. You cant use it as a function.
Don't use the onclick attribute. It results in duplication. Instead, you could use a click event for repetitive actions.
You seem to have gotten the idea to create multiple popups (one for each click of the anchor tag). I think one would do.
Now, in correlation with whatever I've just put down, here's some sample code.
HTML
<a href='#' class='delete' data-num='" + i + "'>Delete me</a>
(Note the data-num attribute in the HTML, the addition of class attribute and the removal of onclick in your code)
It could be replaced by JS which looks like this :
$(this).on("click", ".delete", function (e) {
//prevent default action
e.preventDefault();
//take the id value
var id = $(this).data("num");
//send that value to the popup
$("#delete").find("span").html(id).end().popup("open");
});
A demo fiddle for you to look at : http://jsfiddle.net/hungerpain/AxGde/2/
I'm trying to load dynamic pages with jQuery, following this example.
(EDIT): Updated the code to provide a better view of the context
Here is a code sample
<div data-role="page" id="pageSample">
<div data-role="header">title</div>
<div data-role="content">
<a href="#home" data-role="button" data-transition="slide" data-direction='reverse'>Home</a>
</div>
<div data-role="footer">Footer</div>
</div>
$(document).bind( "pagebeforechange", function( e, data ) {
// Generate dynamic content of targeted pages...
$.mobile.changePage($(page), {
transition:"slide",
dataUrl:url,
reverse:reverse
});
});
The back button may be dynamically generated or not (such as this snippet). In both cases, it does not work reverse, as changePage is triggered through pagebeforechange.
Therefore, I inserted a reverse variable in changePage() options.
I can't find a way to retrieve the data-direction value of the clicked item.
I tried this just before changePage():
reverse = false;
$('a[data-direction="reverse"]').on("click", function(){
reverse = true;
});
But the reverse value is not updated in changePage(). I guess both codes run synchronously.
Is there a way to update the reverse value in changePage() ?
Final update
As per our discussion and your example http://jsfiddle.net/Iris/UZBhx/21/
Change this
$('a').on("click", function()
to
$(document).on("click", 'a', function()
Another update
Binding the $.mobile.changePage to pagebeforechange triggers all your code twice. Thus you lose the value of reverse or it gets neglected when the command executes the first time.
Try binding it to pagebeforehide as below.
$(document).bind( 'pagebeforehide', '[data-role="page"]#PageId', function( e, data ) {
// Generate dynamic content of targeted pages...
$.mobile.changePage($(page), {
transition:"slide",
dataUrl:url,
reverse:reverse
});
});
Update
To use reverse effect on specific buttons, you can follow this method.
First, assign a class for buttons with reverse effect, e.g. ui-reverse and add the below script.
$(document).on('click', '[data-role='button'].ui-reverse', function() {
$.mobile.changePage( url, {
transition:"slide",
reverse: true,
dataUrl:url
});
});
"Back" button links - Jquery Mobile
data-direction="reverse"
Is meant to simply run the backwards version of the transition that will run on that page change, while data-rel="back" makes the link functionally equivalent to the browser's back button and all the standard back button logic applies.
data-rel="back"
This will mimic the back button, going back one history entry and ignoring the anchor's default href.
Adding data-direction="reverse" to a link with data-rel="back" will not reverse the reversed page transition and produce the "normal" version of the transition.
In your case, you want to reverse transition, use the below code.
$.mobile.changePage($(page), {
transition:"slide",
reverse: true, // this will reverse the affect of the transition used in the page.
dataUrl:url
});
Read more about it here.