I want to use Bindings in Polymer Library also outside from Polymer COmponents (vie "dom-bind" of the content body of the Page). Now I have a question, is there a Concept like the "DataContext" of an Element as it is in WPF or SL in Polymer available? That means that I can define Bindings that are relative to a "DataContext" of the Element!
Example:
<div id="droot">
<my-conveyor isoccupied={{BB}}></my-conveyor>
</div>
and I have a Javascript Object like this
{
HH : {
BB : true
}
}
and I set the DataContext of "droot" to "HH" so that is derived to "my-conveyor". Is something like this possible?
I need it, because we convert or WPF/SL Views automatically to HTML.
There is currently, as far as I know, no way of doing this, but it could be possible to extend the existing data binding helpers to support this features.
Something like:
<template is="dom-context" context="{{HH}}">
<my-conveyor is-occupied="{{BB}}"></my-conveyor>
<template>
Related
I'm building a Svelte component library to be consumed using JavaScript only. At a later stage also by other Svelte applications as an additional option.
I want to avoid Svelte's custom element feature, since there are limitations with true Web Components and its Shadow DOM.
Currently the component is instantiated like this:
<div id="my-component"></div>
<script>
document.addEventListener("DOMContentLoaded", function (event) {
new MySvelteComponent({
target: document.getElementById("my-component"),
props: {
firstProp: true,
secondProp: "some value"
}
});
});
</script>
Now I would like to provide a more elegant way by defining a HTLM5 custom tag like:
<my-component firstProp="true" secondProp="some value">
What is a good way to implement this?
found it: github/svelte-tag npm/svelte-tag
see regarding issue on github near to the bottom is the answer from chrisward.
It makes a custom element but without shadow DOM. Found it today and workes for me.
I'm using Fullcalendar v5 in angular js, and i'm trying to make a custom event with:
https://fullcalendar.io/docs/content-injection
eventContent: function(arg) {
return { html: constructEvent(arg) }
},
The thing is that if i add:
"<div ng-repeat='user in arg.event._def.extendedProps.users' class='avatar'>"
"<p>{{ user.name }}</p>"
"</div>"
it won't render. It's like it's outside angular's scope. Can someone tell me if there is a way to construct this with angular js logic? Or i need to use vanilla js to iterate through items. Also ng-click doens't work. I tried even with triggering safeApply digest but no results.
I just want to edit the event inside calendar with the framework i'm using, and use angular events inside it to open sidebars or to make api calls.
Rendering Events
with your line <div ng-repeat it seems that you'd like to iterate through an array of events to display on your screen. If this is the case, you simply need to render the events via the 'events' parameter.
https://fullcalendar.io/docs/event-object
Regarding eventContent (the contents of an event, such as title, subtitle, img, etc)
It looks like at the minute only React JSX Nodes are supported. Vanilla JS is your only way forward.
https://fullcalendar.io/docs/content-injection
I have a component on which I specify the angular i18in attribute like this:
<app-text i18n="meaning|description"> DeveloperText</app-text>
I want to be able to read this property. I have tried using ElementRef and accessing nativeElement but the attribute i18n is not a part of the DOM element when I view the source. When my app is launched the DOM looks like this:
<app-text _ngcontent-c0=""> DeveloperText</app-text>
So can I somehow read properties like this using the Angular Framework?
In your HTML:
<app-text #something i18n="meaning|description">DeveloperText</app-text>
In your controller:
#ViewChild('something') fred;
You now have a handle on the element. If you log it like this:
console.log(this.fred);
console.log(this.fred.nativeElement);
You should find the value of the property you are interested in.
Is it possible to load custom elements dynamically?
Let's say my viewModel looks like this:
export class MyViewModel {
attached() {
$(".content").prepend("<card></card>");
$(".content").prepend("<otherCard></otherCard>");
}
}
Why is aurelia not rendering my "cards". Is there any way i can achive similar behaviour?
Adding those cards directly in HTML works great, but i need a more modular approach.
Thanks
Check out the <compose view-model="card" /> element in the docs. It should give you what you're looking for.
I have a loader div defined as say for simplicity
<div dojoAttachpoint="loaderDiv" style="display:none;">.....</div>
Now when i have a function that is called i want this div to be shown, how do i do that ?
dojoAttachPoints are used in widget templates. So in your widget you simply refer to the node like this.loaderDiv
dojo.style(this.loaderDiv, 'display', '');
If this code is not in a widget, then you should be using id.
<div id="loaderDiv" style="display:none;">.....</div>
dojo.style(dojo.byId('loaderDiv'), 'display', '');
I would also recommend taking a look at the dojox.widget.StandBy.
In progress wheel in Dojo
Since you mention this is in a custom widget you wrote, the suggested way of doing this is to expose a function from your widget that does this
You can access the loaderDiv in that function by using this.loaderDiv as Craig mentioned
It is not advised to access the loaderDiv directly from outside the widget since it is encapsulated in the widget rendering