Question

在我的Meteor应用程序中，我正在努力使用它们的_ids将我的项目相互关联。在下面的代码中，假设我试图通过从所有可用项目的下拉列表中选择其父项来使一个项目成为另一个项目的“子项”。

现在，我没有问题将另一个项目的名称与项目相关联。不幸的是，由于名称不一定是唯一的，我想在从下拉列表中选择其他项目的名称后将该项目与另一项目的_id相关联。我有两个主要问题：

1）如何在选择列表中设置默认值，因此选择任何名称会导致“更改”事件？

2）如何获取“t”参数来引用父项的模板而不是当前模板，以便我可以获取其数据？

现在的代码：

Mongo对象架构：

{"items":[{
  itemText: ,
  createdAt: ,
  createdBy: ,
  checked: ,
  itemTags: [],
]};

单个项目的HTML - items-list.html使用{{#each}}呈现所有项目：

<template name="item">
  <form class="form-inline assign-parent">
    <select class="form-control" name="text">
      {{#each parentItems}}
      {{> parentItem}} // This does return itself but I can fix that :)
      {{/each}}
    </select>
    <button class="btn btn-default" type="submit">Submit</button>
  </form>
</template>

<template name="parentItem">
  <option>{{itemText}}</option>
</template>

单个项目的JS - items-list.js找到所有项目：

Template.item.helpers({
  parentItems: function() {
    var currentUserId = Meteor.userId();
    return Items.find({checked: false});
  }
});

Template.item.events({
  'change .assign-parent': function(event, t) {
    event.preventDefault();

    var selectedParentId = t.data._id;

    Items.update(this._id, {$set: {itemParentId: selectedParentId}});

    return false;
  },
});

Answer 1

1）如何设置默认值

这取决于您的实际需求，您可以轻松添加标签，例如＆＃34;选择一个......＆＃34;像这样：

<select class="form-control" name="text">
  <option disabled selected>Pick one</option>
  {{#each parentItems}}
    {{> parentItem}}
  {{/each}}
</select>

如果要在下拉列表中显示当前值，则必须使用自定义帮助程序（请参阅Meteor select element setting selected value）

2）获得正确的价值

实际上你需要两个值，所以获取Template.parentItem上下文实际上并没有什么帮助。保持这种方式但是从表单中选择的值。

因此，请为每个选项指定其ID

<template name="parentItem">
  <option id="{{_id}}">{{itemText}}</option>
</template>

并在事件中相应地处理

Template.item.events({
  'change .assign-parent': function(event) {
    var selectedParentId = $(event.target).find(":selected").attr("id");
    Items.update(this._id, {$set: {itemParentId: selectedParentId}});
  },
});

使用Bootstrap下拉列表通过Meteor将Mongo文档与另一个文档相关联

1 个答案: