I'm using aurelia compose inside my application like this:
<compose view-model="childViewModel" model="{myActivationParameters: ...}"></compose>
How can I access the parent view model inside the childViewModel html code?
In the end I want to be able to do this inside the childViewModel.html
<span> ${ ParentViewModel.myProperty } and ${ RootViewModel.myOtherProperty } </span>
I'm looking for knockoutJs $root and $parent equivalent in aurelia.
edit: I'm using aurelia composition instead of custom components. Not a duplicate.
In a compose element, you have access to the context of his parent. So, just do ${myProperty}. If you have properties with the same name in the 2 viewmodels, you can't access the parent property.
In a future release, you will need to add the attribute inherit-binding-context in your compose element (See https://github.com/aurelia/templating-resources/issues/222)
Related
I am using a library for tags in my Vue app and I need to change the tabindex and add an eventListener but I don't have the template accessible to add a custom eventListener to since it's an imported component from a library ( https://github.com/JohMun/vue-tags-input/blob/master/vue-tags-input/vue-tags-input.vue ) . My workaround is grabbing the element by class ti-new-tag-input with vanilla JS and then just setting the tabIndex to that. How can I confirm that ti-new-tag-input is part of the public API for that library so I can ensure it won't change?
You should be able to set tabindex directly on the vue-tags-input component.
In the source code you can see, that $attrs is bound to the input element, which means, that the tabindex should get bound to the element you described too.
https://github.com/JohMun/vue-tags-input/blob/master/vue-tags-input/vue-tags-input.vue#L124
<vue-tags-input
v-model="xxx"
tabindex="1"
/>
I am currently struggling with referencing existing DOM elements with VueJS.
I have an existing date input rendered from the applications twig template and a separate VueJS widget i integrated.
<input type="time" ref="date_time_1" min="09:00" max="18:00" value="13:30">
The date input field is NOT inside the components template, but within the VueJS application (having id="#app").
For data-binding i would like to use the ref attribute to connect the VueJS component with my date input field inside the components template (e.g. for initialization with values coming from the application):
mounted() {
componentsTimeValue: this.$refs["date_time_1"].value;
}
getting undefined here.
Is there a way to connect "existing" DOM elements (that are not created with vue), with vue components using the ref attribute at all?
Though not a good practise because #div container is handed over to vue for manipulation but still you can reference the dom that weren't created by vue but lie inside #app
For that you must reference properly, so if you are in some child component you use
mounted() {
componentsTimeValue: this.$root.$refs["date_time_1"].value;
}
I currently developing angular2 application . I would like to know how to add html attributes to custom components.
For example lets assume i have custom dropdown component and am re-using in same page on many places. If i would like to develop some dropdowns as multiselect and some of them single select, Could you please tell me how to that. If I add mutiple on component template it is showing multiselect for all dropdowns. If I add to each component individually where am using, it is not understanding that "Multiple" attribute.
If i would like to develop some dropdowns as multiselect and some of
them single select, Could you please tell me how to that.
You should be using a boolean #Input decorator defined in your custom component (Question seems unclear and i am assuming that you didn't ask for an implementation logic of multi select and single select). Below gives an example of adding a multiselect check for your custom component and how parent should bind value to that attribute when rendering the custom component
In your custom component.ts class
#Input() multiple: boolean = false;
In your custom html class
<div *ngIf="!multiple">
// render your single select html
</div>
<div *ngIf="multiple">
//render your multiple select html
</div>
In the parent html while rendering the custom component (assumpe selector as the name of the component)
// for multi select
<selector [multiple]=true> </select>
// for single select
<selector [multipl]=false> </select>
If your struggling to make a generic component supporting both single and multi select check this open source component ng-select
If you have no idea on #Input and #Output decorators in angular2 check this article
I'm trying to understand the difference between the terms Component and Custom Element in the context of Aurelia.
From the docs, "components are composed of view and view-model pairs" (i.e. an HTML and a JS/TS file). Is a "custom element" just the view (HTML file) half of that combination? Or does a custom element also consist of a view and a view-model?
Component is the model and view-model pair. It defines an Aurelia component. Quoting from their site: Components are the basic building blocks of all Aurelia applications. Custom element is the HTML custom element that can be included in the app's markup like <my-element>. It is defined in the component. Custom as opposed to the standard HTML elements such as <div>, <p> etc.
See
http://aurelia.io/docs/fundamentals/components/
http://aurelia.io/docs/templating/custom-elements/
I'm trying to have an angular like directive in vue,
I will get some templates containing element and specific attribute like this one :
<div container-id=""></div>
When in the DOM I have an element with an attribute conatiner-id, I want to change the background color of my div for instance.
The fact is I don't want to have in my dom, attribute like : v-container-id
I can't actually modify the template