Creating reusable "templates/components" in Blaze or ViewModel

#1

Hi there,

I’ve been enjoying writing a project with a really simple setup in Blaze and ViewModel, it’s enabled me to save a lot of time thus far. However I’m running into a pain point trying to get a nice search/select box going. Having previously had experience building components like this in React (or using react-select), it’s a bit of a comedown coming back to Blaze on this.

My first though was just to integrate a jQuery plugin (selectize, select2) but I just can’t seem to find one that does exactly what I want.

Does anyone have any experience building such a “component” in pure Blaze (or even better in ViewModel)?

I’m really struggling sending method callbacks from one template to the next. Any pointers would be much appreciated!

#2

It might make it easier to help, if you showed what you have come up with so far!

You can pass functions as props, like so:

<template name="x">
  {{> magicalSelect selectProps }}
</template>
Template.x.helpers({
   selectProps() {
      return {
         onChange: val => console.log('Selected', val)
      };
   }
});
#3

Thanks, I’m sorry I didn’t share what I have come up with, I’d just gone back and forward with various attempts and was almost wondering if anyone else had already done something similar or if it was even possible/advisable to do so.

Thanks for sharing the idea of returning all the props as a helper object, that could be really useful.

My initial idea was to try and make use of ViewModel’s mixins. I’ve successfully used these to make pagination for example a simple case of adding the mixin to a new template.

#4

In the meantime I’ve found https://joshuajohnson.co.uk/Choices/ which seems to be a better fit for my needs than the other select libraries