Dojo初学者:如何使用_DomTemplated创建自定义Widget而不会出现渲染错误?

时间:2012-03-19 15:24:06

标签: dojo

我正在使用示例found here编写一个使用dojox.dtl._DomTemplated for DTL(Django模板语言)的自定义Dojo小部件。基本上,我希望有一个小部件,它将显示或不显示一组按钮/链接,具体取决于Widget上设置的值。但是,当我尝试运行自定义组件时,我得到了一些奇怪的声音:

  

如果不指定渲染对象,则无法使用Render对象

dojo.js.uncompressed.js的第3648行发生了这种情况。

My Widget非常简单,我尝试使用外部模板文件并直接在Widget JS文件中定义templateString。

这是小部件代码,因为我目前拥有它:     // img.ArtThumbnailWidget     dojo.provide( “img.ArtThumbnailWidget”);

// Create the widget
require([
         "dojo/_base/declare",
         "dijit/_WidgetBase",
         "dojox/dtl/_DomTemplated",
         "dojo/text!img/ArtThumbnailWidget/templates/ArtThumbnailWidget.html",
         "dojo/parser",
         "dojox/dtl/tag/logic"
    ], function(declare, _WidgetBase, _DomTemplated, template) {

    dojo.declare("img.ArtThumbnailWidget",[dijit._WidgetBase, _DomTemplated], {
        /* Our properties will go here */

        // Art JSON object, default is null
        art: null,

        // Viewer ID (the username of the person looking at this image), which will default to null
        viewerId: null,

        // maxSize is how large of an image to return.  The back-end will resize the thumbnail accordingly
        maxSize: 100,

        // Our template - important!
        templateString: template,

        // A class to be applied to the root node in our template
        baseClass: "artThumbnailWidget",

        _dijitTemplateCompat: true,

        widgetsInTemplate: true,

        /* This is called once the DOM structure is ready, but before anything is shown */
        postCreate: function() {
            // Get a DOM node reference for the root of our widget
            var domNode = this.domNode;

            // Run any parent postCreate processes - can be done at any point
            this.inherited(arguments);
        },

        /* This is called anytime the "art" attribute is set.  Consider is a "setter" method */
        _setArtAttr: function(av) {
            if (av != null) {
                // Save it on our widget instance - note that
                // we're using _set, to support anyone using
                // our widget's Watch functionality, to watch values change
                this._set("art", av);

                // Using our avatarNode attach point, set its src value
                this.thumbnailNode.src = av.url+"?maxSize="+this.maxSize;
                this.thumbnailNode.alt = av.title;
            } else {
                // We could have a default here...would be an error, since we
                // shouldn't be calling this without an art object
            }
        },

        _setMaxSizeAttr: function(ms) {
            // Save it on our widget instance - note that
            // we're using _set, to support anyone using
            // our widget's Watch functionality, to watch values change
            this._set("maxSize", ms);

            this.thumbnailNode.width = ms;
            this.thumbnailNode.height = ms;
        },
    });     // End of the widget

});

这是模板:

<div dojoAttachPoint="containerNode">
    <img class="${baseClass}Thumbnail" src="" alt="" data-dojo-attach-point="thumbnailNode" />
    <% if viewerId == art|owner|name %>
        <p>test</p>
    <% endif %>
</div>

除了尝试直接在Widget JS代码中定义模板之外,我还尝试通过删除模板中的所有DTL标签来简化模板。如果我使用标准_TemplateMixin而不是dojox.dtl._DomTemplated,Widget工作正常,除了DTL没有渲染,它只显示为文本。我也尝试过使用dojox.dtl._Templated,但是我得到了同样的错误。

1 个答案:

答案 0 :(得分:0)

一个老问题,但我正在研究如何为自己做这件事。谢谢你的例子,我得到了它的工作。

事实证明您使用的是错误的模板标签。使用{}代替&lt;&gt;

{% if viewerId == art|owner|name %}
     <p>test</p>
{% endif %}

用于显示变量内容:

{{ varName }}

常规的dojo模板机制$ {varName}在DTL模板中没有任何意义。