meteor app - how to display an empty template when the template helper returns no data

StackOverflow https://stackoverflow.com/questions/22978162

  •  30-06-2023
  •  | 
  •  

In my meteor app I have a data collection form template, which looks like this:

<template name="IntroductionWizard_Step_1">
{{#with contributor}}
<div class="container">
  <div class="hero-unit">
    <h3 class="panel-title">Introduction Wizard Step 1: </h3>

    <form class="form-vertical" role="form">
      <label for="name" class="control-label"><h5 class="text-muted">Name</h5></label>
      <input type="text" id="name" name="name" class="form-control-element" value="{{contributorName}}" placeholder="Name">

      <label for="email" class="control-label">Email</label>
      <input type="text" id="email" name="email" class="form-control-element" value="{{contributorEmail}}" placeholder="Email">

      <label for="phone" class="control-label">Phone</label>
      <input type="text" id="phone" name="phone" class="form-control-element" value="{{contributorPhone}}" placeholder="phone #">

      <label for="orgRole" class="control-label">Org Role</label>
      <input type="text" id="orgRole" name="orgRole" class="form-control-element" value="{{contributorOrgRole}}" placeholder="Org Role">
    </form>

  </div>
</div>
{{/with}}
</template>

And the helper for this template looks like this:

Template["IntroductionWizard_Step_1"].helpers({
  contributor: function(n) {
    return ContributorCollection.findOne({contributorName: "Jim Szczygiel"});
  }
});

It is acceptable for this helper to either return data, if it is found, or, not to return data. Currently, when the data is returned, it shows up in this form, but, when no data is returned, then this page shows up empty - the form template is not being displayed at all. What should I do to still show an empty template form even when there was no data returned?

有帮助吗?

解决方案

with acts like an if plus a namespace, so what you are seeing makes sense - the whole form would be conditionally removed. What will probably work is just to remove the with and instead use the full name for each value. e.g.:

value="{{contributor.contributorName}}"

I just did a little test and found that even if contributor isn't defined, it didn't seem to fail.

其他提示

Can you return an empty string in this case? If the fineOne returns undefined it will return "" instead. At one time returning undefined in Blaze would crash Deps, not sure if that's still the case.

Template["IntroductionWizard_Step_1"].helpers({
  contributor: function(n) {
    return ContributorCollection.findOne({contributorName: "Jim Szczygiel"}) || "";
  }
});

This could be an easy solution for you. To simulate the case that your template helper returns no data simply comment the return statement.

HTML

<body>
  {{> IntroductionWizard_Step_1}}
</body>

<template name="IntroductionWizard_Step_1">
   <!-- if contributor is found ContributorTemplate is included with the returned object as data context -->
   {{#with contributor}}
       {{> ContributorTemplate}}
   {{/with}}

    <!-- if contributor is NOT found ContributorTemplate is included with an empty object as data context -->
   {{#unless contributor}}
       {{> ContributorTemplate}}
   {{/unless}}
</template>

<template name="ContributorTemplate">
  <input value="{{contributorName}}" placeholder="Name">
</template>

JS

if (Meteor.isClient) {
  Template.IntroductionWizard_Step_1.contributor = function () {
    return {contributorName:  "Jim Szczygiel"}; // comment this line to see effect!
  };
}

Result

With returned object:

enter image description here

Without returned object:

enter image description here

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top