在 Dojo 中创建小部件答案

【问题标题】：Creating a widget in Dojo在 Dojo 中创建小部件
【发布时间】：2012-08-24 12:43:16
【问题描述】：

我正在使用 Dojo Toolkit 开发一个移动应用程序。我想制作以下小部件：

<div data-dojo-type="dojox.mobile.ListItem" data-dojoprops="moveTo:'breakdown'">
    <div>Maximum: Some value</div>
</div>

我希望能够像这样使用小部件：

<div data-dojo-type="dojox.mobile.RoundRectList">
    <div data-dojo-type="MyWidget" data-dojo-props="maximum:'1200'"></div>
</div>

这是我到目前为止所做的：

require(
    [ "dojo/_base/declare", "dojo/parser", "dojo/ready",
        "dojox/mobile/ListItem", "dijit/_WidgetBase",
        "dijit/_TemplatedMixin" ],

        function(declare, parser, ready, ListItem, _WidgetBase, _TemplatedMixin) {
            declare("MyWidget", [ ListItem, _WidgetBase, _TemplatedMixin ], {

                templateString: "<div>"         
                              + "<div>Maximum: <span data-dojo-attach-point='maximumNode'></span></div>"
                              + "</div>",

                maximum : "unknown",
                _setMaximumAttr : { node : "maximumNode", type : "innerHTML" },

                buildRendering : function() {
                    this.inherited(arguments);
                }
            });

            ready(function() {
                parser.parse();
            });
        });

我没有收到任何错误或类似的东西，页面没有加载。这段代码有什么问题？

【问题讨论】：

你不需要 _WidgetBase 或 _TemplatedMixin 来创建 ListItem 的扩展，ListItem 已经继承了这两个类——尽管它没有坏处。您是否尝试过在准备好的函数中不使用 parser.parse 以编程方式创建它？
我没有尝试以编程方式创建它，因为根据练习是不允许的。但我也不知道如何以编程方式执行此操作，因为我是 Dojo Toolkit 的新手。你不能给我一些工作代码或教程链接吗？

标签： javascript html mobile dojo dojox.mobile

【解决方案1】：

我写了这个简单的例子。

从你的代码 sn-p 我怀疑你可能想做这样的事情http://jsfiddle.net/hJJUD/7/

我建议不要更改该 listItem 中的模板，而是尝试使用它具有的属性。看看这个文档http://dojotoolkit.org/reference-guide/1.8/dojox/mobile/ListItem.html

如果您发现需要其他任何东西，请告诉我。

【讨论】：

感谢您的回复。除了更改模板之外别无选择，因为我实际上有一个更复杂的 ListItem。我只列出了最大属性，因为我认为它足以解决问题。如何在您的示例中使用模板？
通过查看代码，这似乎是不可能的，因为 ListItem 的代码将 this.srcNodeRef 和 this.containerNode 和 this.domNode 设置为同一个实例，而 _TemplatedMixin 假设它们是不同的。在这一点上，然后我建议您尝试“克隆” ListItem 中的内容并制作您自己的内容（而不是扩展它）。不过路还很长。
问题是，ListItem不使用templateString，它通过buildRendering编程构建DOM
克隆 ListItem 的工作量太大。你还有其他建议吗？我可以使用 templateString 创建自己的自定义小部件并将 ListItem 用作根元素吗？然后我可以在 RoundRectList 中使用这个小部件吗？