Add a way to pass a native view reference to parent component as a prop

[rigor789]

There are many UI plugins that require passing in a view as a property, in xml this is achieved the following way:

<nsDrawer:RadSideDrawer id="sideDrawer">
  <nsDrawer:RadSideDrawer.drawerContent>
    <StackLayout>
      <!-- etc -->
    </StackLayout>
  </nsDrawer:RadSideDrawer.drawerContent>
</nsDrawer:RadSideDrawer>

When registering custom UI elements that use the same approach, the problem is that in ns-vue

<RadSideDrawer id="sideDrawer">
  <StackLayout>
    <!-- etc -->
  </StackLayout>
</RadSideDrawer>

tries to append the StackLayout as a child element, and results in nothing displaying.

My initial idea is to add a custom directive that will handle this, using a similar syntax to the default v-bind:, : or v-on, @ directives.

Naming things is hard, so please help me find a good name and syntax for the proposed directive.

The new syntax would look something like

<RadSideDrawer id="sideDrawer">
  <StackLayout v-view:drawerContent>
    <!-- etc -->
  </StackLayout>
</RadSideDrawer>

And it would probably make sense to add a shorthand version as well

<RadSideDrawer id="sideDrawer">
  <StackLayout ~drawerContent>
    <!-- etc -->
  </StackLayout>
</RadSideDrawer>

Leave your suggestion as a comment to what the name of the directive should be!

My initial idea is v-view:parentPropName, ~parentPropName for the shorthand version.

Checklist

• Add v-view directive and ~ as the alias
• Document usage in docs
• Decide if v-view is the right name for the directive.
• Add .array modifier
• Add array mode shorthand alias

Allow setting a parent array property

So looks like we need to allow multiple children to be added to the parent's prop using an array. Either extend the module to detect arrays (this will likely break in many cases), or create a dedicated directive for setting the array.

Possible short syntax: ~~, ~[], ~.array etc (comment below if you have an idea)

Example:

<Parent>
  <Child ~parentProp.array />
  <Child ~parentProp.array />
  <Child ~parentProp.array />
</Parent>

The long syntax would use a directive modifier: v-view:prop.array.

[rigor789]

You can play around with the directive in this playground: https://play.nativescript.org/?template=play-vue&id=5A3eP-ShmM0QEHiMDDfY0

[guyaumetremblay]

You're reading in my mind! I just tried to integrate the RadSideDrawer and I found the need of a directive. Yours is working really well! Good work!

Did you find a way to put the RadSideDrawer inside a Page with an ActionBar (and so a button to open the drawer)?

[rigor789]

You can add an action bar if you wrap the RadSideDrawer in a Page.

https://play.nativescript.org/?template=play-vue&id=6o7FUvfPHw04BqIOY5sz

[guyaumetremblay]

Oh fine it works! Don't know what I did wrong when I tested it.
Tested with showOverNavigation="true" and it works too.

[rigor789]

Moved to nativescript-vue/nativescript-vue.org#5