javascript - Meteor/Mongo - 你如何引用查找集合？ (去规范化与规范化)

Question

我是 Meteor 和 mongo 菜鸟(现在是 Meteor 的忠实粉丝)，并且正在努力研究如何在 Meteor 中实现查找集合。

场景:

• 我有一个自定义颜色的产品(用户定义/未知数量)
• 用户可以添加自己的自定义颜色，然后转到 产品页面并从颜色选择框中选择他们想要的颜色 用于该产品
• 如果用户返回并修改颜色页面上的颜色十六进制值(并保存)，则产品(在产品页面上)会反射(reflect)新的颜色十六进制值

我想做的事:

• 允许用户返回并修改颜色页面上预先存在的颜色
• 颜色十六进制值的变化是否反射(reflect)在产品页面上
• 尽量不在不同集合上重复数据(并担心在更新中途失败时跨多个集合更新数据/数据不一致)

最初我设置了我的产品架构来保存颜色数据(非规范化数据)，但是当颜色更新时，它不会在排版文档上更新。我已经看到您可以使用 observeChange 的观察来实质上监听更改，然后进行其他更改，尽管这似乎比它需要的更复杂。 有没有一种方法可以引用添加到特定产品的所有颜色的颜色集合，以便任何更改都反射(reflect)在产品页面上？

以下是我一直在处理的一些代码。如果有帮助，我正在使用 collection2 和 iron:Router。我已经尝试连接两个集合，但这不是我所追求的，因为每个循环也循环通过颜色(不需要)。

感谢任何帮助。先感谢您! -克里斯

ProductPage 助手:

Template.productPageTpl.helpers({
  ownProduct: function() {
    return this.userId === Meteor.userId();
  },

  productItems: function() {
    return ProductCollection.find({productId: this._id});
  },

  colorsItems: function() {
    return ColorsCollection.find({productId: this._id});
  },

  // This is my attempt and although give me back both collections, 
  // I only need to reference the colors.
  productAndColorsItems: function() {
    var product = ProductCollection.find({productId: this._id}).fetch();
    var colors = ColorsCollection.find({productId: this._id}).fetch();
    var productColorsJoin = product.concat(colors);
    console.log(productColorsJoin);
    return _.sortBy(productColorsJoin, function(doc) {return doc.createdAt;});
  }
});

产品页面 html:

<template name="productPageTpl">
  <div class="product">
    {{#each productAndColorsItems}}
      {{> productItemTpl}}
    {{/each}}
  </div>
</template>

// All the {{properties}} below reference the ProductCollection except for the {{colorHex}}
// {{colorHex}} is a property on the ColorsCollection
<template name="productItemTpl">
  <div id="product-sentence-js" 
       style="color: #{{colorHex}};
              font-family: {{fontFamily}};
              font-weight: {{fontWeight}};
              font-size: {{fontSize}}{{fontUnit}};
              font-style: {{fontStyle}};
              text-transform: {{fontTextTransform}};
              line-height: {{fontLineHeight}}{{fontLineHeightUnit}};
              padding: {{fontPaddingTop}}{{fontPaddingTopUnit}} {{fontPaddingRight}}       {{fontPaddingTopUnit}} {{fontPaddingBottom}}{{fontPaddingTopUnit}} {{fontPaddingLeft}}{{fontPaddingTopUnit}};
              margin: {{fontMarginTop}}{{fontMarginTopUnit}} {{fontMarginRight}}{{fontMarginTopUnit}} {{fontMarginBottom}}{{fontMarginTopUnit}} {{fontMarginLeft}}{{fontMarginTopUnit}};">
    {{productSentence}}
  </div>
</template>

颜色集合架构

ColorsCollection = new Mongo.Collection('colors');

var Schema = {};

Schema.ColorsCollectionSchema = new SimpleSchema({
  productId: {
    type: String,
    label: "Product Id",
    max: 500
  },
  userId: {
    type: String,
    label: "User Id",
    max: 500
  },
  author: {
    type: String,
    label: "Author",
    max: 500
  },
  submitted: {
    type: Date,
    label: "Submitted",
    max: 500
  },
  colorName: {
    type: String,
    label: "Color Name",
    max: 500
  },
  colorHexValue: {
    type: String,
    label: "Color Hex Value",
    max: 500
  },
  colorHexValueId: {
    type: String,
    label: "Color Hex Value Id",
    max: 500
  }
});

ColorsCollection.attachSchema(Schema.ColorsCollectionSchema);

简而言之，只要用户更改颜色页面上的颜色，颜色文档就会更新为新的十六进制值(在 ColorsCollection 中)，并且所有使用该颜色的产品现在都会反射(reflect)该新颜色十六进制值。

Answer 1

这是我想出的解决方案。我欢迎任何替代/Meteor 最佳实践方法。

第一:

我实现了本文 (https://gentlenode.com/journal/meteor-6-reactive-and-nonreactive-join-with-mongodb/12) 中所述的响应式(Reactive) publist(包)。这是一个很大的帮助，因为它允许服务器将更改推送到已经呈现的页面。

第二:

我实现了以下代码。本质上，我通过引用 Meteor 提供给该记录的 id(不会改变)来找到用户选择编辑的特定颜色。选择框的值设置为颜色 id，并使用数据值来保存实际的十六进制值。绝不是完美的，尽管当用户编辑颜色值时，产品项目以及选择框值都会立即更新。

Template.productItemTpl.helpers({
  productItemColorHexValue: function() {
    var allColors =  ColorsCollection.findOne({colorHexValueId: this.productColorHexValueId});
    return allColors.colorHexValue;
  }
});

<template name="productColorsSelectOptionsTpl">
    {{#each productColorsSelectOptions}}
      <option data-colorhexvalue="{{colorHexValue}}" value="{{colorHexValueId}}">{{colorName}}     </option>
    {{/each}}
</template>