I would like to attach a ref attribute to an HTML element that has a custom directive.
Let's say I have a directive named v-custom and whenever it is used on an element, I would like ref="elem" to be added to the element.
I have tried using directives like so:
Vue.directive('custom', {
inserted(el) {
el.setAttribute("ref", "elem");
}
});
And in one of my components I have this:
<span v-custom>Testing</span>
And when I view it in a web page I can inspect that span element and see that it has the ref attribute but when I inspect the refs of the component it belongs to it says that it contains no "elem" ref.
However, If I add the ref tag myself like so:
<span v-custom ref="elem">Testing</span>
Then it works as intended and I can see the "elem" ref in the console.
Is there any way to get my use case working or is this intended behavior?
As #skirtle noted, ref is written as a normal DOM attribute in the vue template code, but is handled differently when parsed. A vue component instance/view model/"vm" has an object vm.$refs which maps keys to DOM elements. We can modify this object ourself. The issue then is how to get the parent vm from within the directive (we already got the DOM element el).
Looking at the documentation for custom directives https://v2.vuejs.org/v2/guide/custom-directive.html#Directive-Hook-Arguments, we can see that the third argument is a "vnode" reference, and looking at its documentation, we can see that vnode.context references the container vm; thus:
Vue.directive('my-directive', {
inserted (el, binding, vnode) {
console.log('directive inserted')
const refKey = "s2"
vnode.context.$refs[refKey] = el // set it
}
})
Vue.component('my-component', {
template: '#my-component-template',
replace: false,
props: {text: String},
mounted () {
console.log('component mounted')
this.$refs.s1.innerText = 's1 ref working'
this.$refs.s2.innerText = 's2 ref working' // use it
}
});
new Vue({
el: '#app',
data: {
status: "initialized",
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
hello
<my-component :text="status"></my-component>
</div>
<script type="text/x-template" id="my-component-template">
<div>
{{text}}, <!-- to illustrate props data passing working as usual -->
<span ref="s1"></span>, <!-- to illustrate a normal ref -->
<span class="nested"> <!-- to illustrate vnode.context doesn't just get the parent node -->
<span v-my-directive></span>
</span>
</div>
</script>
Running this example, we can see that the v-my-directive successfully modifies vm.$refs.s2 to reference the DOM-element with the directive, before the mounted function in the vm is run, where we can use the reference.
Beware that you probably would like some logic to not overwrite the ref if more that one elements contains the directive.
Happy coding!
Related
I'm having an issue with component binding and state.
This is my html template:
<div class="ts-panel content">
<!--ko with: states.createState-->
<div data-bind="component: 'customer-create'">Testing CreateState</div>
<!--/ko-->
<!--ko with: states.lookupState-->
<div data-bind="component: 'customer-search'">Testing LookupState</div>
<!--/ko-->
</div>
This is my javascript
var myDataModel = function () {
var self = this;
self.states = {};
self.states.createState = ko.observable(true);
self.states.lookupState = ko.observable(false);
self.states.currentState = ko.observable(self.states.createState);
self.states.changeState = function (state) {
var currentState = self.states.currentState();
currentState(false);
self.states.currentState(state);
state(true);
}
};
return myDataModel;
I'm using another script to control which state I'm in by binding click events to certain buttons.
The problem I'm running into is that when I change the current state, the component bindings reset the state of the component. Eg. on the customer-create component, I fill out a form, then change to the lookupState, then change back to the createState, the form values are gone.
I think this is happening because the components are getting wiped out and recreated every time.
I also think that one solution to this is to store everything at the root level (i.e. the component that stores the states) and pass that all down when required to the individual components. However, I'd really like to keep the component-specific information inside those components.
Is there a way to store the state of the components or maybe store the components in a variable and bind to it that way?
From the documentations:
If the expression you supply involves any observable values, the expression will be re-evaluated whenever any of those observables change. The descendant elements will be cleared out, and a new copy of the markup will be added to your document and bound in the context of the new value.
The behaviour is same for the if binding as well. You could use the visible binding for this. This just hides and shows the div without actually removing it from the DOM. There is no containerless control flow syntax for visible. So, you'd have to add it to the div
<div data-bind="component:'customer-create', visible: states.createState">Testing CreateState</div>
In an Angular 5 component, I'm getting the error: Error: The selector "#person-component" did not match any elements. The thing is that when I inspect the page, the element is there with the right ID. Also, when I load the page from a router link, it works, it's only when I navigate directly to the URL that I get the error.
The element that it can't find is being added by another component, and I'm adding it in the module that contains the parent component. Clearly, something different is happening when I use a link from the main component, but I don't know what that is. The failing line (below) is in ngAfterContentInit, so I don't know why it can't find the element.
This is the code that's failing in the component:
ngAfterContentInit () {
...
const container = this.renderer.selectRootElement('#person-component');
this.renderer.setAttribute(container, 'id', htmlId);
...
}
Here's how it's being added.
Main component HTML:
<employee-component> ... </employee-component>
Sub-component:
#Component({
...
selector: 'employee-component',
template: `
<div id="person-component"></div>
`,
})
Here's the element when I inspect the page:
<div id="person-component"></div>
Demo
use ngAfterViewInit instead of ngAfterContentInit :
ngAfterViewInit () {
const container = this.r.selectRootElement('#person-component');
this.renderer.setAttribute(container, 'id', htmlId);
}
we use ngAfterContentInit to wait for projected Content in <ng-content> to be loaded.
I'm very confused about how to properly tie components together.
I have two components registered globally:
Vue.component('product-welcome-component', {
template: '#product-welcome-template',
props: ['showModal'],
onCreate(){
showModal = false;
}
});
Vue.component('product-create-modal-component', {
template: '#create-modal-template'
});
In the parent's template I included the child component like this:
<template id="product-welcome-template">
<div class="welcome-wrapper">
<div class="purpose-title"><h1 class="welcome-text">Welcome to Product Hub</h1></div>
<div class="purpose-create-btn"><button ##click="showModal = true" class="btn btn-primary btn-success create-btn">Create New Product</button></div>
<product-create-modal-component v-if="showModal"></product-create-modal-component>
</div>
</template>
The problem is (one of them) is that my create-modal-component is always showing, regardless of the value of showModal, in fact i can put in v-if="1 === 2" it would still show.
I'm sure this is not the right way of registering parent / child components but I can't seem to find a proper example. Mostly what i see that the parent is the app instance and it has a child of 'child' component and then they can communicate.
I have a feeling that including the child component in the parent's template is bad practice as it makes the parent strongly coupled.
Any help would be appreciated, thank you!
You are having showModal as props to product-welcome-component, but you are trying to set it false in created, but you have to use this in created to access showModal, like following:
Vue.component('product-welcome-component', {
template: '#product-welcome-template',
props: ['showModal'],
onCreate(){
this.showModal = false;
}
});
However you are saying product-create-modal-component shows even you do v-if="1 === 2", which should not be the case Can you create a fiddle of your case.
Hi I would like to know if the is a way to tell ember to initialize immediately after the root Element?
For example I have this DOM Structure:
<div id="#bodyContent" class="ember-application">
<div data-name="ContentPlaceHolderMain">
</div>
<div id="ember357" class="ember-view">
</div>
</div>
But I Want ember to be first on the DOM:
<div id="#bodyContent" class="ember-application">
<div id="ember357" class="ember-view">
</div>
<div data-name="ContentPlaceHolderMain">
</div>
</div>
In my enviroment.js file I have this line:
ENV.APP.rootElement = "#bodyContent";
Is there any way to achieve this?
Ember uses appendTo to insert it's view inside root element. But you could override didCreateRootView of ember instance and change it to use prependTo. Have a look how Fastboot does this.
Update: This is an instance-initializer to overwrite didCreateRootView.
export function initialize(appInstance) {
appInstance.didCreateRootView = function(view) {
// overwrite didCreateRootView
};
}
export default {
name: 'prepend-to',
initialize
};
ember/glimmer does not provide an prependTo method. You have to implement that one on your own following the implementation of appendTo.
Please also note that didCreateRootView is a private hook. Don't expect that one to keep stable over time.
In general I would not recommend to go this path if there is any other way to achieve your goal. Please consider adding a container for ember at desired position. If you don't have control over HTML markup you might could add a container using jQuery before initializing ember.
Update 2:
import jQuery from 'jquery';
export function initialize(appInstance) {
appInstance.didCreateRootView = function(view) {
let containerId = 'ember-container';
jQuery('<div>').prop('id', containerId).prependTo(jQuery(this.rootElement));
view.appendTo(`#${containerId}`);
};
}
export default {
name: 'prepend-to',
initialize
};
This is not exactly what you've asked for but it's much easier to achieve. If your HTML markup looks like <body><div id="existing-content"></body> and body as default root element above instance initializer will add another div #ember-container before #existing-content and using this one as embers root element.
Update 3:
You find an ember-twiddle here: https://ember-twiddle.com/43cfd1ae978b810f2e7cf445f9a3d40c?openFiles=instance-initializers.root-element.js%2C
If you inspect DOM you will see that ember root element is wrapped by <div id="ember-container"></div>. This wrapper is append to rootElement. So it's before any existing content in rootElement. I guess it's not possible to define a custom index.html in ember-twiddle so I can't demonstrate this one. But you could easily test yourself.
I just realized I was misunderstanding the el attribute of a Backbone.View. Basically my views require dynamic id attributes based on its model's attribute. I thought I had this working fine because I simply specified it in my template:
<script type="text/template" id="item_template">
<li class="item" id="{{identifier}}">
<span class="name">{{name}}</span>
</li>
</script>
However, I realized that what Backbone was actually doing was putting this compiled template into another element, div by default. I learned more about this by reading the documentation, but I'm still confused on how to create a dynamic id.
Preferably, I would love to find a way to make it such that the stuff in the above template serves as my el, since it already has everything I want, but I don't know if that is possible. So I'm wondering if, quite simply, there is a way to specify a dynamic id attribute.
I tried setting it within the initialize method, this.id = this.model.get('attr') but it didn't seem to have any effect, possibly because by this time it is already too late.
What I'm currently doing is just using jQuery to add the id in during render():
this.el.attr(id: this.model.get('identifier'));
it works, but of course, I'm simply asking if there is a preferred way to do it through Backbone.
Yes there is a standard way to do this in Backbone. You can pass id to the View constructor. You can also refactor your template so that Backbone creates the parent <li> element for you. Try this simpler template:
<script type="text/template" id="item_template">
<span class="name">{{name}}</span>
</script>
And add these to your view:
myView = Backbone.View.extend({
className: "item",
tagName: "li"
})
And instantiate it like this:
var view = new YourView({
model: mymodel,
id: mymodel.get('identifier') // or whatever
})
Good luck!
There is one more approach. I found it more convenient than passing id every time you create an instance of your view.
Template:
<script type="text/template" id="item_template">
<span class="name">{{name}}</span>
</script>
View:
var MyView = Backbone.View.extend({
tagName: 'li',
attributes: function(){
return {
id: this.model.get('identifier'),
class: 'item'//optionally, you could define it statically like before
}
}
})
When you create your view, pass in a selector that will let the view find your existing pre-rendered DOM element:
var id = "1234";
var view = YourView({el: '#'+id});