Meteor/Mongo - 你如何引用查找集合？(去标准化与标准化)

Question

我是Meteor和mongo noob(现在是一个巨大的Meteor粉丝),我正在努力实现如何在Meteor中实现查找收集.

场景:

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

我正在做的事情:

• 允许用户返回并修改颜色页面上预先存在的颜色
• 将颜色十六进制值更改反映在产品页面上
• 尝试不重复不同集合上的数据(并担心如果更新失败,请在多个集合/数据不一致的情况下更新数据)

最初我设置了我的产品架构来保存颜色数据(去标准化数据),但是当颜色更新时,它没有在排版文档上更新.我已经看到你可以使用observeChange的观察来基本上听取变化,然后进行其他更改,尽管这似乎比它需要的更复杂.有没有办法可以为添加到特定产品的所有颜色引用颜色集合,以便任何更改都反映在产品页面上？

下面是我一直在研究的一些代码.我正在使用collection2和iron:路由器,如果这有助于任何.我已经尝试连接两个集合,虽然这不是我所追求的,因为每个循环也循环颜色(不需要).

任何帮助表示赞赏.先感谢您!-克里斯

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中)更新颜色文档,并且所有使用该颜色的产品现在都会反映新的颜色十六进制值.

Answer 1

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

第一的：

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

第二：

我实现了下面的代码。本质上，我通过引用 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>