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

這是我提出的解決方案。 我歡迎任何替代/流星最佳實踐方法。

第一：

我實現了本文（ https://gentlenode.com/journal/meteor-6-reactive-and-nonreactive-join-with-mongodb/12 ）中概述的反應性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>