In this doc I found that I can customize our CMS templates, slots and components:
Data-driven outlets are provided by the CMS structure. There are three types, as follows:
CMS Page layout name: Each page layout is available as an outlet reference.
CMS page slot positions: Each slot position is an outlet reference. Since slot positions are not necessarily unique throughout the CMS structure, an outlet template might occur more then once. There is currently no standard technique available to limit the outlet for a specific position or page.
CMS Component type: Each component type is available as an outlet. While component type-driven outlets can be used, it is generally considered best practice to leverage Customizing CMS Components for introducing custom component UI.
Could you please provide any example how to do that with outlets if I have next custom structure:
<main>
<cx-page-layout class="AccountDetailsPageTemplate">
<cx-page-slot class="BottomHeaderSlot"></cx-page-slot>
<cx-page-slot class="AccountMenuSlot"></cx-page-slot>
<cx-page-slot class="AccountContentSlot"></cx-page-slot>
</cx-page-layout>
</main>
As result I would like to have next layout view:
I know how to do that using global styles only, but preferably is to use templates (outlets), because it can be the case when we require to add some extra parent div's over the slots and so on.
To build such structure with provided set of Slots, we can do next:
app.component.html (REQUIRED)
<ng-template cxOutletRef="AccountDetailsPageTemplate">
<app-account-details-page></app-account-details-page>
</ng-template>
account-details-page.component.html
<h1>
Hello AccountDetailsContentSlot
</h1>
<div class="d-flex">
<div class="w-50">
<cx-page-slot position="AccountMenuSlot"></cx-page-slot>
</div>
<div class="w-50">
<cx-page-slot position="AccountContentSlot"></cx-page-slot>
</div>
</div>
I didn't put here BottomHeaderSlot, because it should't be here, it should be implemented in cx-header component.
Related
I'd like to use the md-card material from Vue Material in an existing application. The example on the website (https://vuematerial.io/components/card/) uses the following:
<template>
<div>
<md-card>
...
</md-card>
<md-card md-with-hover>
...
</md-card>
</div>
</template>
When I use this in the HTML page and create a Vue object for the containing div, the components do show, but the layout is not working. I have tinkered with the layout classes, but the behavior is not matching the example. How can I configure the layout in a plain HTML page to match the example's layout behavior? Is the example page adding another layer to the example div to create the layout behavior?
Updated: I tried a similar scenario in JsFiddle, and it works perfectly: https://jsfiddle.net/w9m6q05f/3/ . In my application, the cards are always in a column regardless of the width of the view, and the bottom card is stretched towards the bottom of the view. Do I need to set the class of the containing div? It may be getting overwritten by my application somewhere else.
Update 2: The culprit is which has height: 100%
Sorry for the beginner question (I'm fairly sure this will be a duplicate, but I actually can't figure out what terms to use in order to find it). I just started with Vue.
I am just getting started with Vue, and following this course (https://www.vuemastery.com/courses/intro-to-vue-js/communicating-events). In this problem, there is (and here I don't know the term, so I'm going to go with...) app-level data parameter called cart. cart is an array which holds the id of each item a user has added to cart.
The problem tells us to add a button to remove items from the cart.
I ran into problems trying to create a computed property, which would allow me to hide the "remove" button in the event the selected item is not in the cart (eg. `
Communicating data from the app-level (the cart array), to the component-level (to a computed property in the product component), so that I could use something like :hidden="!inCart" on the "Remove from Cart" button, which is itself defined in the component. inCart would be a computed value here.
Communicating the selected product from the component to the app-level, computing inCart at the app level, then using the computed value at the component-level.
Either way, I can't seem to figure out how to do this in the way I would want to, which would look something like how v-bind operates. Namely, I think I may be able to hack together a solution using methods (which I believe have to be triggered by certain events), but I don't understand how I might go about this using built-in functionality such that the value of inCart is dynamically auto-computed.
Maybe there would be an answer to this in the next few courses, but I don't see us covering that in the intro material. Sorry for the neophyte question. Thank you in advance.
In Vue the way you communicate "state" from higher-level objects to lower-level objects is through props.
So, assuming your app looks something like...
<MyApp>
<MyShoppingPageWithItems>
<MyItem></MyItem>
<MyItem></MyItem>
<MyShoppingPageWithItems>
</MyApp>
You need to pass the cart object down as a prop.
So in your MyShoppingPageWithItems template, you'll have something like...
<template>
<div>
<MyItem v-for="item in items" :item=item :cart="cart"?
</MyItem>
</div>
</template>
And in your item template...
<template>
<div>
<div>
{{item.name}}
</div>
<div v-if="cart.includes(item.id)">
Remove button or whatever
</div>
</div>
</template>
Not that the .includes() method is a native JavaScript method, which you can read more about here.
Edit
To reference a prop in a computed property (or anywhere else in a Vue component), just refer to this.propName, as demonstrated here in the Vue docs.
So, if you want to create a computed property, you can do the following:
<template>
<div>
<div>
{{item.name}}
</div>
<div v-if="isInCart">
Remove button or whatever
</div>
</div>
</template>
<script>
export default {
props: ['cart', 'item'],
computed: {
isInCart() {
return this.cart.includes(this.item.id)
}
}
}
</script>
Note that the formula is the exact same as above, but just includes this. for cart and item. In templates, the this. is implied when referring to props, data, and computed properties.
I'm trying to wrap my head around how "inner components" can adjust the content of "outer components". Let's say I have an application template that looks something like this:
<template>
<div class="sidebar">
<div>Some app-wide content</div>
<div>
<!-- I want to put some view-specific content here -->
</div>
</div>
<div class="main-body">
<router-view></router-view>
</div>
</template>
Each subview wants to render different content to the sidebar. Obviously this would be easy if the subview included the sidebar area itself, but let's say it is important to preserve the structure and we don't want to replicate the boilerplate of the sidebar across every view.
Is there any way for a child view to declare "export this extra component for display in another place?" I imagine something like injecting the parent view and calling a method on it, but I can't figure it out from the documentation.
Simple demo:
It's fairly simple, actually. Just import and inject your sidebar or any other viewmodel and call a method or update a property.
https://gist.run/?id=745b6792a07d92cbe7e9937020063260
Solution with Compose:
If you wanted to get more elaborate, you could set a compose view.bind variable to that your sidebar would pull in a different view/viewmodel based on the set value.
https://gist.run/?id=ac765dde74a30e009f4aba0f1acadcc5
Alternate approach:
If you don't want to import, you could also use the eventAggregator to publish an event from the router view and subscribe to listen to that event from your sidebar and act accordingly. This would work well for a large app setting where you didn't want to tie them too closely together but wanted the sidebar to react correctly to unpredictable routing patterns by always responding when triggers were published.
https://gist.run/?id=28447bcb4b0c67cff472aae397fd66c0
#LStarkey's <compose> solution is what I was looking for, but to help others I think it's worth mentioning two other viable solutions that were suggested to me in other forums:
View ports. You can specify multiple named router views in a template and then populate them by passing in a viewPorts object to the router instead of specifying a single moduleId. The best source of documentation is a brief blurb in the "Cheat Sheet" of the Aurelia docs.
Custom elements. It's a little more "inside-out" but you could define most of the outer content as a custom element that has slots for the sidebar and the main body; each child view would define this custom element and pass in the appropriate pieces.
I know that Aurelia is a framework for an SPA but I need to open multiple pages at the same time inside the browser.
I want to host each page (view/viewmodel) within a draggable div and have more than one open at the same time. They will be selected by the User from a menu.
I have looked at viewPorts but cannot see how they will help in this problem.
Is there another way to do this?
Yes, there is a way to do this.
You say pages, but basically they are components. Every component has a HTML (view) and JS (view-model) file. They can be included as custom-elements.
So if you want multiple possible components on one page, all you need to do is create one component that has a placeholder for those views.
Probably, you would want something looking like this:
running Gist example
<template>
<require from="./page1"></require>
<require from="./page2"></require>
<page1></page1>
<hr>
<page2></page2>
</template>
You can create loop for all elements you want to display, if you need multiple instances of the same page, and put a repeat.for on the elements:
HTML:
<template>
<require from="./page1"></require>
<require from="./page2"></require>
<page1 repeat.for="i of page1instances"></page1>
<hr>
<page2 repeat.for="i of page2instances"></page2>
</template>
JS:
export class App {
const page1Instances = 4;
}
Making them drag&droppable works like every other element, there are many solutions for that to be found. Just make the <page1> and <page2> draggable.
I have found content selectors don't seem to work when an if binding is used on a parent element. For example:
some-element.html
<template>
<div if.bind="true">
This will appear
<content></content>
</div>
</template>
app.html
<template>
<some-element>This will not appear</some-element>
</template>
This works fine if I don't use the if binding, but will not render <content> when I do use the if binding. Is there something I'm doing wrong here or is there a way to get this to work as expected?
I'll be adding this to our documentation soon, but for now, here is #EisenbergEffect's explanation from https://github.com/aurelia/framework/issues/375
"No. That is a characteristic of the shadow dom. The content selection points have to be static. They cannot be added ore removed dynamically. If you want to hid them, then consider using show.bind instead."