试图使一个dojo小部件，将创建一个窗体

Trying to make a dojo widget that will create a form

本文关键字：一个 创建 窗体 小部 dojo      更新时间：2023-09-26

我想让它，所以我把data-dojo-type="js/widget/SAUploadForm"为上传小部件，它将在那里生成一个表单。不知道我现在错了什么，因为页面上没有生成表单。

<html>
<head>
<title>Upload</title>
<script>
    dojoConfig = {
        async : true,
        parseOnLoad : false
    }
</script>
<script src="js/dojo/dojo.js"></script>
</head>
<body>
<div>
    <h1 align="center">Upload</h1>
    <br />
    <div data-dojo-type="js/widget/SAUploadForm"></div>
</div>
</body>
</html>

我的小部件文件:SAUploadForm.js

define(["dojo/_base/declare", "dojo/dom-construct", "dojo/parser", "dijit/_WidgetBase", "dijit/_TemplatedMixin"],
    function(declare, domConstruct, parser, ready, _WidgetBase, _TemplatedMixin) {
        decalre("SAUploadForm", [_WidgetBase, _TemplatedMixin], {
            formString: '<form method="post" enctype="multipart/form-data" action="/webapp/upload">' +
            '<table>' + 
                '<tr>' + 
                    '<td>File:</td>' + 
                    '<td><input type="file" name="file" value="Browse" accept=".sub" /></td>' + 
                '</tr><tr>' + 
                    '<td colspan="2"><button type="submit">Upload</button></td>' + 
                '</tr>' + 
            '</table></form>',

            buildRendering: function() {
                this.domNode.innerHTML = formString;
            }
        });
        ready(function() {
            parser.parse();
        });
});

位于js/widget/

这里有太多错误的东西了……

  • 有一个错字:decalre而不是declare
  • 你应该使用templateString而不是你自定义的formString
  • 你必须要求js/widget/SAUploadForm如果你想让解析器知道它
  • 你声明ready，但你不需要它
  • 返回declare的结果

应该这样做:
(注意:代码片段不能工作，因为代码需要将小部件放入单独的文件中)

//This goes into js/widget/SAUploadForm.js
define(["dojo/_base/declare", "dojo/dom-construct", "dijit/_WidgetBase", "dijit/_TemplatedMixin"],
    function(declare, domConstruct, _WidgetBase, _TemplatedMixin) {
       return declare("js/widget/SAUploadForm", [_WidgetBase, _TemplatedMixin], {
            templateString: '<form method="post" enctype="multipart/form-data" action="/webapp/upload">' +
            '<table>' + 
                '<tr>' + 
                    '<td>File:</td>' + 
                    '<td><input type="file" name="file" value="Browse" accept=".sub" /></td>' + 
                '</tr><tr>' + 
                    '<td colspan="2"><button type="submit">Upload</button></td>' + 
                '</tr>' + 
            '</table></form>'
        });
});
//this goes into the index.html file
require(["dojo/parser", "dojo/domReady!", "js/widget/SAUploadForm"], function(parser) { 
  parser.parse();
});
<script>
    dojoConfig = {
        async : true,
        parseOnLoad : false
    }
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<div>
    <div data-dojo-type="js/widget/SAUploadForm"></div>
</div>

相关文章：