Meteor - 如何使用 Meteor.js 输出复选框值？答案

【问题标题】：Meteor - how to output checkbox value's with Meteor.js?Meteor - 如何使用 Meteor.js 输出复选框值？
【发布时间】：2016-02-11 22:17:29
【问题描述】：

我在使用 Meteor.js 输出选定复选框的值时遇到问题。复选框值在浏览器中输出为 [object Object]。谁能帮帮我。

HTML

    <head>
  <title>project</title>
</head>

<body>
  {{>addStatusForm}}
</body>

<template name="addStatusForm">
    <form class="addStatus">
      {{#each category}}
        <input type="checkbox" name="categoryCheckbox" class="boxCheck" value={{categoryDesc}}>{{categoryDesc}}<br>
      {{/each}}
        <input type="text" name="status">
        <input type="submit" value="Add status">
    </form>
    {{#each status}}
    <p>{{statusDesc}} {{category}}</p>
    {{/each}}
</template>

帮助者

Template.addStatusForm.helpers({

  status: function () {
    return Status.find();
  },

  category: function(){
    return Category.find();
  }
});

活动

Status = new Mongo.Collection('status');
Category = new Mongo.Collection('category');


Template.addStatusForm.events({

  'submit .addStatus': function (event) {
    event.preventDefault();
    var statusInput = event.target.status.value;

    var categorySelected = $('.boxCheck:checked').val();

    //var categorySelected = event.target.categoryCheckbox.value; tried this
    //var categorySelectedString = JSON.stringify(categorySelected); tried this also

    //console.log(categorySelected); just testing console output
    //console.log(statusInput); just testing console output

    Status.insert({
        statusDesc : statusInput,
        category : categorySelected
    });
}

【问题讨论】：

标签： javascript jquery html meteor checkbox

【解决方案1】：

问题不在于它是如何存储的（console.log(typeof categorySelected ) 表明它是一个字符串而不是一个对象），而是您在显示数据时在此模板中定义了两次“类别”字段，一次来自助手和一次作为集合对象内的字段。它赋予助手优先于集合数据的优先级，因此您可以获得从 return Category.find(); 返回的对象，这是一个对象，因此是 [object Object] 输出

这里有两个快速解决方案：

A) 将 category 助手的名称更改为 categories 或其他名称

B）（可能更流畅）将每个代码中的代码移动到状态模板中，使其具有一点隔离性，因此它看不到父模板类别字段

{{#each status}}
  <p>{{statusDesc}} {{category}}</p>
{{/each}}

/*...BECOMES...*/

{{#each status}}
  {{>statusTemplate}}
{{/each}}


<template name="statusTemplate">
  <p>{{statusDesc}} {{category}}</p>
</template>

【讨论】：