topic Content Distribution with Slots in Vue.js in Alfresco Archive

topic Content Distribution with Slots in Vue.js in Alfresco Archive https://connect.hyland.com/t5/alfresco-archive/content-distribution-with-slots-in-vue-js/m-p/159878#M113899 <HTML><HEAD></HEAD><BODY><PRE __default_attr="info" __jive_macro_name="alert" alert="info" class="jive_text_macro jive_macro_alert">This is a personal blog post that is primarily intended for tracking my own learning rather than provided to the Alfresco Community for educational purposes. However if you find it useful, informative or have any comments on it then please comment below.</PRE>At the end of my <A _jive_internal="true" href="https://community.alfresco.com/people/ddraper/blog/2016/12/21/getting-started-with-vuejs" rel="nofollow noopener noreferrer">last post</A> I'd got my Node.js based application set up and was accessing data from an Alfresco Repository over <A href="https://github.com/mzabriskie/axios" rel="nofollow noopener noreferrer">axios</A> and rendering it in a simple <A href="https://vuejs.org/" rel="nofollow noopener noreferrer">Vue.js</A> component. I now wanted to explore building out some interaction with the data that was being loaded and I decided to make a start by building some basic pagination controls. You can view the state of <A href="https://github.com/draperd/AlfrescoNodeJS" rel="nofollow noopener noreferrer">my project</A> at the time of writing by checking out this <A href="https://github.com/draperd/AlfrescoNodeJS/releases/tag/Blog4" rel="nofollow noopener noreferrer">tag</A>.After several years working on Aikau I find it very difficult to break away from the practice of writing small, re-usable and abstract components. I've also spent a lot of time thinking about how I would implement list handling if I had the chance to do it again. I think that I got a lot write with the way I implemented the AlfList widget in Aikau in that it was predominantly used just for managing the list state but I wish that I'd used it to encapsulate all the controls that would update the  list so that I could make better use of event bubbling. Therefore I naturally took this as an opportunity to investigate that approach.In an ideal world I'd love to get to the point where you can just build up a page using custom elements (i.e. <A href="https://en.wikipedia.org/wiki/Web_Components" rel="nofollow noopener noreferrer">Web Components</A>) and Vue.js refers to this as "Content Distribution" (which is called "transclusion" in Angular). It would be great if you could build an Alfresco client directly into an HTML page with custom elements similar to this:<PRE class="line-numbers language-markup"><CODE><alf-list>   <alf-list-toolbar>     <alf-list-paginator></alf-list-paginator>   </alf-list-toolbar>   <alf-list-view>   </alf-list-view> </alf-list> ‍‍‍‍‍‍‍</CODE></PRE>However, I've gotten so far (with Vue.js) is what you see in my code currently:<PRE class="line-numbers language-markup"><CODE><alf-list>   <template scope="props" slot="before-view">     <alf-list-toolbar :list="props.list"></alf-list-toolbar>   </template>   <template scope="props" slot="view">     <alf-list-view :list="props.list"></alf-list-view>   </template> </alf-list>‍‍‍‍‍‍‍‍</CODE></PRE>The additional template elements act as a way in which properties can be passed from parent component to child component assigned to a slot. Now whilst this does work it feels less intuitive and seems to result in another problem in that custom events can't be emitted from child component to parent component without the aid of a "<A href="https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication" rel="nofollow noopener noreferrer">global event bus</A>".The implementation I currently have does work and the use of <A href="https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow" rel="nofollow noopener noreferrer">one-way data flow</A> works really nicely in that the pagination buttons emit an event to page forwards or backwards and the list component requests new data which when set will automatically cause the pagination controls and view to refresh.<IMG alt="" class="image-1 jive-image" src="https://connect.hyland.com/legacyfs/online/alfresco/11666_Blog4_2.png" style="width: 556px; height: 325px;" /><IMG alt="" class="image-2 jive-image" src="https://connect.hyland.com/legacyfs/online/alfresco/11667_Blog4_1.png" style="width: 556px; height: 326px;" />Despite the current code working I'm going to switch to a more standard development approach where each component simply references another directly in it's template rather than trying to use slots. I might revisit the content distribution option later and investigate how other frameworks address it.</BODY></HTML> Thu, 22 Dec 2016 05:58:50 GMT ddraper 2016-12-22T05:58:50Z Content Distribution with Slots in Vue.js https://connect.hyland.com/t5/alfresco-archive/content-distribution-with-slots-in-vue-js/m-p/159878#M113899 This is a personal blog post that is primarily intended for tracking my own learning rather than provided to the Alfresco Community for educational purposes. However if you find it useful, informative or have any comments on it then please comment below.At the end of my last post I'd got my Node.js Thu, 22 Dec 2016 05:58:50 GMT https://connect.hyland.com/t5/alfresco-archive/content-distribution-with-slots-in-vue-js/m-p/159878#M113899 ddraper 2016-12-22T05:58:50Z