search

ManuelDeLeon / viewmodel

MVVM for Meteor
https://viewmodel.org
MIT License
205 stars 23 forks source link

Setting a shared property to 'undefined' causes bugs #285

Closed steph643 closed 7 years ago

steph643 commented 7 years ago

Here is my code:

<template name="home">
  {{#if alert}}
    <div class="alert {{alert.class}}">{{{alert.text}}}</div>
  {{/if}}

  <h1>Home Page</h1>
  ...
</template>
ViewModel.share({
  homeAlert: {
    alert : undefined    // By default: no alert to display
  }
});

Template.home.viewmodel({
  share: 'homeAlert'
});
<template name="modal">
  <div class="modal">
        ...
        <div class="modal-footer">
           {{! Button is enable only if all fields have been successfully validated }}
          <button type="button" {{ b "enable: valid"}}>Ok</button>
        </div>
        ...
  </div>
</template>
Template.modal.viewmodel({
  share: 'homeAlert'   // Alert component from the home page, so that we can display an error message
});

With this code, the button is never enabled, even when all fields are valid. If I replace alert : undefined by alert : null, the code works as expected.

ManuelDeLeon commented 7 years ago

Please make a minimum repro (without the bootstrap stuff). The following works as expected:

ViewModel.share({
  alertBucket: {
    alert: undefined
  }
})

Template.body.viewmodel({
  share: 'alertBucket',
  show(){
    this.alert({ text: "AAAA"})
  }
});
<body>
  <button {{b "click: show"}}>Alert</button>
  {{#if alert}}
    <h1 {{b "text: alert.text"}}></h1>
  {{/if}}
</body>
steph643 commented 7 years ago

Here is the minimal code to reproduce the issue:

main.html

<body>
  {{> header}}
  {{> form}}
</body>

<template name="header">
  <h1>Bug ViewModel</h1>
  {{#if unusedFlag}}{{/if}}
</template>

<template name="form">
  <p>Please enter your name below:</p>
  <input type="text" {{b "value: name"}}>
  <button type="button" {{ b "enable: valid"}}>Ok</button>
  <p>The Ok button should activate when you input a non-blank name. But it doesn't...</p>
</template>

main.js

ViewModel.share({
  sharedProps: {
    unusedFlag : undefined  // Set it to null to fix the bug
  }
});

Template.header.viewmodel({
  share: 'sharedProps'
});

Template.form.viewmodel({
  share: 'sharedProps',
  name: ViewModel.property.string.notBlank  
});

Please let me know if you still need a repo.

ManuelDeLeon commented 7 years ago

Thanks, I'll fix it.

btw, it's not exclusive to shared properties. You get the same behavior with regular properties initialized to undefined (the VM will stay invalid).

ManuelDeLeon commented 7 years ago

Pick up v6.2.1 Thanks!