时间戳

首页 > 解决方案 > 在模块的构造方法中访问模板选项

javascript - 在模块的构造方法中访问模板选项

问题描述

在Apostrophe中，我有一个自定义模块，我想将 Nunjucksapos.area调用中的一个选项传递给小部件本身的构造方法。具体来说，我想getWidgetWrapperClasses根据模板中传递给模块的选项来调整输出。这可能吗？

这是我想要实现的示例：

lib/modules/example-widgets/index.js

module.exports = {
    extend: "apostrophe-widgets",
    label: "Example widget",
    construct: function(self, options) {
        self.getWidgetWrapperClasses = function(widget) {
            // templateOptions would be the options object as defined
            // in home.html below
            return ["column", "column-" + templateOptions.width];
        };
    }
};

lib/modules/apostrophe-pages/views/pages/home.html

{% extends "layout.html" %}

{% block content %}
    <div id="widgets">

        {{ apos.area(data.page, "example", {
            widgets: {
                "example": {
                    width: "half"
                }
            }
        }) }}

    </div>
{% endblock %}

标签： javascriptapostrophe-cmsnunjucks

解决方案

我通过不使用该getWidgetWrapperClasses方法解决了这个问题，而是扩展了小部件包装模板并在其中覆盖了 Nunjucks 块。lib/modules/apostrophe-areas/views/widgetBase.html如果您查看Apostrophe 的代码，这实际上是一种记录在案的方法。

我lib/modules/example-widgets/index.js是这样改的：

module.exports = {
    extend: "apostrophe-widgets",
    label: "Example widget",
    wrapperTemplate: "wrapper",
    construct: function(self, options) {
        // Do something
    }
};

然后，我添加了一个lib/modules/example-widgets/views/wrapper.html文件。在该文件中，您可以简单地覆盖该extraWrapperClasses块以添加您想要的类，同时可以通过data.options.

{% extends "apostrophe-areas:widget.html" %}

{% block extraWrapperClasses %}column column-{{ data.options.width }}{% endblock %}

推荐阅读