【问题标题】:Blaze template, loop through fields?Blaze 模板,遍历字段?
【发布时间】:2021-05-20 18:09:56
【问题描述】:

我无法找到任何可用于循环遍历名为“week01”、“week02”、“week03”的字段的快捷方式的引用,我可以在其中引用包含子字段的对象的字段相同的结构。

我知道每个文档的#each,但不知道如何处理每个字段。我有 30 周的字段,想遍历字段,然后也引用对象属性。

谁能给我一个提示或在线资源可能对我有帮助?我是一名 VB/php 开发人员,正在开发我的第一个 Meteor 应用程序,并且是第一次使用 Mongo。希望我错过了一些可能的东西。

    "personId": "rY7XaJJkrdAWaByQK",
    "week01": {
        "date": {
            "$date": "2021-04-07T12:00:00.000Z"
        },
        "field1": "chunks as necessary",
        "field2": "readable English",
        "field3": "Contrary to popular belief"
    },
    "week02": {
        "date": {
            "$date": "2021-04-14T12:00:00.000Z"
        },
        "field1": "consectetur, from",
        "field2": "more recently with desktop",
        "field3": "Contrary to popular belief"
    },
    "week03": {
        "date": {
            "$date": "2021-04-21T12:00:00.000Z"
        },
        "field1": "going through",
        "field2": "readable English",
        "field3": "Contrary to popular belief"
    },
    "week04": {
        "date": {
            "$date": "2021-04-28T12:00:00.000Z"
        },
        "field1": "words which don't look",
        "field2": "sure there isn't",
        "field3": "Contrary to popular belief"
    },
    "week05": {
        "date": {
            "$date": "2021-05-05T12:00:00.000Z"
        },
        "field1": "only five centuries",
        "field2": "Where can I get some",
        "field3": "infancy. Various"
    }
} ```

【问题讨论】:

    标签: javascript mongodb meteor meteor-blaze


    【解决方案1】:

    #each 只接受数组或游标,因此您需要从您的对象中提取一个数组。

    在 JavaScript 中,您可以从对象(即您的文档)的字段(属性)生成一个数组,并过滤​​它们以仅包含属性名称(键)中包含 week 的那些。然后您可以通过帮助程序返回它们:

    const document = {
       "personId": "rY7XaJJkrdAWaByQK",
        "week01": {
            "date": {
                "$date": "2021-04-07T12:00:00.000Z"
            },
            "field1": "chunks as necessary",
            "field2": "readable English",
            "field3": "Contrary to popular belief"
        },
        "week02": {
            "date": {
                "$date": "2021-04-14T12:00:00.000Z"
            },
            "field1": "consectetur, from",
            "field2": "more recently with desktop",
            "field3": "Contrary to popular belief"
        },
        "week03": {
            "date": {
                "$date": "2021-04-21T12:00:00.000Z"
            },
            "field1": "going through",
            "field2": "readable English",
            "field3": "Contrary to popular belief"
        },
        "week04": {
            "date": {
                "$date": "2021-04-28T12:00:00.000Z"
            },
            "field1": "words which don't look",
            "field2": "sure there isn't",
            "field3": "Contrary to popular belief"
        },
        "week05": {
            "date": {
                "$date": "2021-05-05T12:00:00.000Z"
            },
            "field1": "only five centuries",
            "field2": "Where can I get some",
            "field3": "infancy. Various"
        }
    }
    
    const weeks = Object.entries(document) // will be an array of key/value pairs
      .filter(([key, value]) => key.includes('week')) // only use week fields
      .map(([key, value]) => value) // only use the value
    
    Template.helpers({
      allWeeks () {
        return weeks
      }
    })
    
    

    然后您可以通过{{#each week in allWeeks}} 对其进行迭代。

    注意:这有点低效,因为每次重绘都会运行上面的代码。您将引入一个 ReactiveVar 或 ReactiveDict 并在其中保存 week 并从该反应源返回值:

    const state = new ReactiveDict()
    const weeks = Object.entries(document) // will be an array of key/value pairs
      .filter(([key, value]) => key.includes('week')) // only use week fields
      .map(([key, value]) => value) // only use the value
    
    state.set({ weeks })
    
    
    Template.helpers({
      allWeeks () {
        return state.get('weeks')
      }
    })
    

    读数:

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

    https://docs.meteor.com/api/reactive-dict.html

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2019-02-02
      • 2011-03-10
      • 2011-02-06
      • 2022-12-11
      • 2018-05-24
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多