ViewModel 2 - A new level of simplicity

announce
228

The first one is a lot cleaner and simpler so I definitely prefer it.

229

Yeah, that is my common pattern, too. Are there any performance differences between these two? If I got it right, the second one isnā€™t reactive, but the first one is. So Iā€™m wondering if I have some more of this properties which arenā€™t needed for any template displaying issues, would they slow down my app on low performance devices?

230

In theory yes, in practice no. It falls under the category of ā€œit just doesnā€™t matterā€.

2 Likes
231

I donā€™t understand. If the dependencies donā€™t change then the autorun shouldnā€™t execute.

232

@manuel just btw, Iā€™m getting this in my browser console

Don't have debug information for [T#createViewModel]. Please report it at https://viewmodel.org/help. In the mean time you can turn off checks with `ViewModel.ignoreErrors = true`. See https://viewmodel.org/docs/misc#ignoreErrors for more information.

Iā€™m using 2.9.3 and set persists to false.

233

Donā€™t update viewmodel-debug. Itā€™s for the latest ViewModel.

234

Ah okay, but after upgrading to v4 I get:

Don't have debug information for [$default]. Please report it at https://viewmodel.org/help. In the mean time you can turn off checks with `ViewModel.ignoreErrors = true`. See https://viewmodel.org/docs/misc#ignoreErrors for more information.
235

What versions are you using?

236

Ah sorry, I had to remove and add it again, now works fine, thanks.

237

Probs with readonly html attr here:

ViewModel.addAttributeBinding(['disabled', 'readonly','tabindex'])

input(maxlength='30' autocomplete="off"   $b= "tabindex: tabindex, readonly: readonly")

This produces a readonly input, which was not my intent.

<input maxlength="30" autocomplete="off" b-id="60" tabindex="0" readonly="undefined">

My intent was to control whether input is readonly via setting viewmodel.readonly(true)
How can I remove this attribute completely when I donā€™t need it and set it when I do need it?

238

The attribute binding sets the text of an attribute to what the property contains. It has no notion of special attributes which need to be removed if certain conditions are met.

You would have to add a custom binding:

ViewModel.addBinding({
  name: 'readonly',
  autorun(bindArg){
    const isReadOnly = bindArg.getVmValue();
    if (isReadOnly) {
      bindArg.element.attr('readonly', 'readonly');
    } else {
      bindArg.element.removeAttr('readonly');
    }
  }
});
1 Like
239

Does it make sense to publish single reusable bindings as npm packages?

240

For small stuff like this, maybe. It would be like underscore or jQuery, some people will like to have a grab bag of bindings, others wonā€™t.

Where I see the most value is in libraries of bindings specifically designed for CSS frameworks like Bootstrap, Semantic UI, etc. Things to make it easier to produce lists, dropdowns, modals, etc.

Unfortunately I donā€™t have time to do either.

1 Like
241

Thanks, Manuel, youā€™re a real lifesaver! :heart:

btw, seems like readonly attr shouldnt be present in the list of common attr bindings as it calls for special treatment:

But would you like to?

242

Iā€™ll update the docs.

But would you like to?
Sure, why not.

243

Hey @manuel,
is there a common pattern if I want to close a notification list if the user clicks anywhere outside of the document (like on facebook)? At the moment Iā€™m trying to use signals, it recognizes the click but it collides with my binded click events on the single notification icons.

So If a user clicks on the message icon, I set showMessages(true) [binding] but also setting showMessages(false) [signal], when the document click signal is fired.

244

I donā€™t think I follow. Make me a repro.

245

I was wondering about similar thing when I was rewriting new guide Todos app to use Viewmodel. It uses original javascript focus and blur events which work in a different way than Viewmodel focus binding. Thereā€™s an option to go with {{on "focus: function()"}} instead of {{b "focus: function()"}} but I wondered back then if there is a better way to rewrite that part.

246

Iā€™ve just used added a click binding on the wrapper, so if the user clicks anywhere on the page, all notifications will be closed (I am calling the notification VM via ViewModel.findOne(ā€œnotificationsā€).closeAll())

247

I really want a repro so weā€™re in the same page.