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/
Related
I have a working VueJS app with nested components.
In one of the components, I want to be able to inject arbitrary HTML but I don't want VUEJS to parse it : I want plain old HTML tags (scripts, iframes, style, divs, native events, whatever I need).
I know I can do that outside the root "#app", but is there a way to do that inside it ?
Thanks.
You can use v-html directive, it takes an expression that evaluates to a string and sets the element's innerHTML to that string. Vue won't parse it as a template and insert it into the DOM instead. This is one of those things that you need to pay attention to security for.
See docs: https://vuejs.org/api/built-in-directives.html#v-html
Here is an example from some tutorial:
<p id="p">Example: <i>italic</i> and <b>bold</b></p>
<script>
let range = new Range();
range.setStart(p.firstChild, 2);
range.setEnd(p.querySelector('b').firstChild, 3);
alert(range); // ample: italic and bol
// use this range for selection (explained later)
window.getSelection().addRange(range);
</script>
How to do this with vue?
Should I use query selectors too?
I am interested how to do this selection manipulation within contenteditable. I can use "ref" for contenteditable container but inner content with bold, italic etc. tags is dynamic and mark this code with refs:
... <b><i>some text</i></b> ...
isn't appropriate.
If you're using the Selection API to manipulate the DOM (not just creating ranges, but adding/removing/modifing/reordering DOM nodes), then you should be doing those manipulations on DOM elements not managed by Vue. You must not modify parts of the DOM managed by Vue because Vue won't know about those changes and it will get confused when trying to patch the DOM during the next render cycle. Vue "owns" the rendered DOM of its components.
This doesn't mean you can't use the Selection API and Vue together, it just means you need to be careful not to tinker in the DOM willy-nilly.
Should I use query selectors too? Using p.querySelector('b').firstChild isn't vue way but I don't know what should I use insted
This rule only applies if you want to get a reference to a DOM node rendered by Vue. If the container were content editable, then its contents would not be managed by Vue and you would have no way of referencing its contents without using querySelector and other DOM functions. Try not to get caught up with "am I doing it the Vue-way?" when what you are trying to do is inherently not Vue related anyway.
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)
I have an Aurelia application in which I'm trying to build a CMS component. This component will load data from the server and this data mainly contains slug, title and content fields.
I also have several global components defined in my application, and I want to be able to use those components in the server so when I pull that data my CMS component is able to transform/compile those custom elements.
An example would be a tab component. I have the tab component with this structure defined:
<tab-panel>
<tab title="First"></tab>
<tab title="Second"></tab>
</tab-panel>
The CMS component will contain a content property which I use to pass a string like this: '<tab-panel><tab title="First"></tab><tab title="Second"></tab></tab-panel>'
The component needs to compile that string and render it in its view. I've checked the enhance API, but it doesn't worked, at least for me. Any other suggestion to dynamically compile/render custom elements??
Thanks a lot in advance.
I've found the solution. I've used a compose element and InlineViewStrategy and it worked well, the components are shows and binding works as expected.
If your custom elements are registered globally using globalResources you can actually using the TemplatingEngine to dynamically insert content into the DOM and then compile it after-the-fact. This blog post goes into detail in how you can do it.
However, I would use this as a last resort. As is mostly always the case, there are much better ways to do something in Aurelia. Using the <compose> element is a great way to dynamically render content in your Aurelia applications and should always be the first port of call.
In ExtJS 4, what's the difference between componentCls, cls and bodyCls ?
ExtJS provide many options in styling the components. Each of these property have its place in implementing proper theming of your components.
cls: This is applied to the component's root element. Quoting from the docs:
An optional extra CSS class that will be added to this component's
Element. This can be useful for adding customized styles to the
component or any of its children using standard CSS rules.
By default, this is empty. If you need to style some child elements (by elements don't mean ExtJs components.. instead, they are HTML elements auto generated by the framework) of a component then, you can use this. For example, If you want to change background color of you's tab panel's inner area, you can do something like this:
.customCss x-box-inner {
background-color: yellow;
}
componentCls: This also gets applied to the component's root element. But, this property is meant to hold CSS styles for the component as a whole. Quoting from the docs:
CSS Class to be added to a components root level element to give
distinction to it via styling.
From result point of view, both cls and componentCls gets applied to the root element. But, the are used for different purposes.
bodyCls: This is available for Panels. You will not find this styling for a button because, there is no body. If you want to provide custom styles for your panel's body region.. you can do so by setting this property.