dojo - 如何在 Dojo 中使用 postCreate？

Question

我正在测试 post create，所以我可以在 postcreate 中设置类属性，而不是在这里调用

request("js/my/data/sample.json", {
    handleAs: "json"
}).then(function (jsonResults) {
    arrayUtil.forEach(jsonResults.LinksMap, function (List) {
        arrayUtil.forEach(List.LinksMap.entry, function (Ientry) {
            if ('information' === Ientry.linkType) Ientry.className = 'info';
            else if ('news link' === Ientry.linkType) Ientry.className = 'news';
            var widget = new support(Ientry).placeAt(authorContainer);
        });
    });
});

我试过了

postCreate: function () {
    this.inherited(arguments);
},
_setLinkClssAttr: function (iconClass) {
    if (iconClass != "") {
        if ('information' === linkType) LinkClss = 'info';
        if ('news link' === Ientry.linkType) LinkClss = 'news';

        this._set("LinkClss", iconClass);
        this.LinkNode.class = iconClass;
    }
}

我的 HTML 模板看起来像这样

<a class="${baseClass}LinkClss"  href="${Link.url}" data-dojo-attach-point="LinkNode">${Link.title}</a>

Answer 1

这是你的意思吗？

HTML 代码：

<div id="myWidget1"></div>
<div id="myWidget2"></div>
<div id="myWidget3"></div>

CSS：

.info {
    color: red;
}
.news {
    color: blue;
}

创建 Widget 的代码，传入一个入口对象：

require([
    "dojo/parser", "dojo/dom", "MyWidget", "dojo/domReady!"],

function (parser, dom, MyWidget) {
    console.log(arguments);
    parser.parse().then(function () {
        var linkTypes = ['information', 'news link', 'other'];
        linkTypes.forEach(function (linkType, i) {
            var entry = {
                link: 'hello' + (i + 1),
                linkType: linkType,
                linkHref: "https://www.google.co.uk/search?q=" + linkType
            };
            new MyWidget(entry, dom.byId("myWidget" + (i + 1)));
        });
    });
});

定义小部件的代码：

define("MyWidget", [
    "dojo/_base/declare", "dojo/dom-class", "dojo/dom-attr", "dojo/query",
    "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/NodeList-dom"],

function (declare, domClass, domAttr, query, _WidgetBase, _TemplatedMixin) {
    var template = [
        '<div>',
        '<a data-dojo-attach-point="linkNode"></a>',
        '</div>'];
    return declare("MyWidget", [_WidgetBase, _TemplatedMixin], {
        templateString: template.join("\n"),
        constructor: function (params, srcNodeRef) {
            console.log("creating widget with params " + dojo.toJson(params) +
                " on node " + srcNodeRef);
        },
        postCreate: function () {
            console.log(arguments);
            this.inherited(arguments);
            this._setLinkClass();
        },
        // private methods
        _setLinkClass: function () {
            var linkClass = this._calculateLinkClass();
            console.log(linkClass, this.linkNode);
            if (linkClass != "") {
                query(this.linkNode).addClass(linkClass);
            }
        },
        _calculateLinkClass: function () {
            var linkClass = "";
            if ('information' === this.linkType) linkClass = 'info';
            if ('news link' === this.linkType) linkClass = 'news';
            return linkClass;
        },
        // Attributes
        link: "empty",
        _setLinkAttr: {
            node: "linkNode",
            type: "innerHTML"
        },
        linkHref: "#",
        _setLinkHrefAttr: function (href) {
            domAttr.set(this.linkNode, "href", href);
        }
    });
});

结果：