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>