ViewModel 2 - A new level of simplicity

announce
331

Thanks @daveeel and @manuel that really helps.

My bad I thought for some crazy reason ViewModel was built on Angular2ā€™s rendering and event model somehow.

Sounds like Iā€™ll go with your React ViewModel implementation as a view handler.

And thanks for the offer of help Iā€™ll probably pipe up with a curly one sometime

cheers

332

You may have gotten that idea because I usually describe ViewModel as ā€œAngular without the boilerplate and ceremoniesā€

1 Like
333

Viewmodel for React may actually let me give react another try.

But there is still the issue of using coffee-script with react (and Viewmodel is really so much nicer with coffee-script). CJSX works, but I havenā€™t found a linter that integrates with atom. I know you are into coffee-script. And hints on the web are somewhat sparse and mostly outdated. Any advice?

2 Likes
334

@manuel Any idea when we can expect non-preview release of ViewModel for React? Iā€™m a Blaze fan myself but seeing that even you probably wonā€™t consider Blaze for your next project makes me wanting to reconsider my choices :slight_smile:

1 Like
335

Is ViewModel for React ready to try out?

336

ViewModel for React Alpha :smiley:

337

@M4v3R @aadams

I think itā€™s ready to use but itā€™s missing a few things ViewModel for Blaze has:

I will add those soon.

@janmp

I love CoffeeScript but I donā€™t miss it that much working with ViewModel (or ES6 for that matter).Take the following CJSX as an example:

Time
  showTitle: ''
  time: -> new Date()
  render: ->
    <h1 b="if: showTime, text: time" />

Letā€™s be honest, that isnā€™t too far from the JSX version:

Time({
  showTime: true,
  time() {
    return new Date();
  },
  render() {
    <h1 b="if: showTime, text: time" />
  }
})
338

Thanks @manuel.

I have a ton of screens are are just forms (inputs/dates/radio/checkbox controls) with a submit button.

Do you know of any examples of using with forms using your tech?

For example, client side, reactive, validation on the form? Maybe even using your tech with Simple Schema?

Iā€™m trying to move away from Autoform and am thinking of React these days, but wiring up reactive client side validation done right is a real pain.

339

Iā€™m away from my computer but I wanted to point you to some areas of the documentation so you can make a decision.

For what itā€™s worth, Iā€™ve never felt the need for something like auto forms and plenty of people started using both ViewModel and autoform at the same time and then dropped autoform because they felt they didnā€™t need it.

Check out the following:
https://viewmodel.org/react#AdvancedValidation
https://viewmodel.org/docs/misc#controls

The gist of it is that you can create your own input controls with all the validation they need.

2 Likes
340

Manuel, it seems that VM doesnā€™t support global helpers like currentUser or the ones created with registerHelper in bindings:

<template name="binding">
  <input {{b "if: currentUser"}} type="checkbox" > checkbox
</template>

Doesnā€™t show the checkbox no matter if user logged in or not.
ps. Iā€™m running VM 4.0.14 stillā€¦

341

Hi, have you had success with VM and cjsx? Iā€™m struggling with that now.

342

I donā€™t think cjsx is possible with viewmodel-react because itā€™s a babel plugin.

@avalanche1

How do you get the value of a global helper from JS?

343

No, have not looked into it. Sticking with Blaze on my current project.

344

What do you mean? currentUser is a Meteor built-in Spacebars helper

345

Yeah but to make {{b "if: currentUser"}} work, I need to get the value from within ViewModel (plain JavaScript), not spacebars.

346

I think Iā€™m doing the same then :slight_smile:

347

Quick question, probably a simple answer.

How could I find items in the scope of regular Template.helpers? For example, how would I get data that regular Blaze would retrieve from Template.instance()?

Iā€™m working with a package that is built for original blaze and is storing some data in helpers, I need to access them from my viewmodel??

348

I honestly have no clue how you can call a template helper without creating a global one. How would you do it without VM?

349

So in the example in the OP, if we had:

Template.greeting.helpers({
  firstName: function() {
    return Template.instance().state.get("firstName");
  }
});

And then we made

Template.greeting.viewmodel({

});

There would be no way to access firstName from the viewmodel?

350

Wait, I thought you had no control over the helper. In that case you can just call the method directly:

Template.greeting.viewmodel({
  firstName() {
    return this.templateInstance.state.get("firstName");
  },
  anotherMethod() {
    console.log( this.firstName() )
  }
});