practice.html

<div>


</div>

practice.js

define([ "dojo/_base/declare"
     , "dojo/text!./practice.html"
     , "dijit/_WidgetBase"
     , "dijit/_TemplatedMixin" 
     , "dijit/_WidgetsInTemplateMixin"

    ], function(declare, _templateString, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin)
    {
    function trace(msg) {

        console.log("practice:", msg, arguments);
    }

    function Controller(w) {
        function myPractice(){
            alert("My Practice");
        }

    this.myPractice = myPractice;       
    }



    var d = 
    declare("Practice.practice", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin],  {
        widgetsInTemplate: true,
        templateString: _templateString
        , constructor: function(args) {
            declare.safeMixin(this, args);
        },
        postCreate: function(){
            this.inherited(arguments);
            var controller = new Controller(this);
            //controller.myPractice();
            this.myPractice = controller.myPractice;
    }
    });
    return d;
});

我正在使用test.html

执行此操作

的test.html

<html >
<head>

    <link rel="stylesheet" href="D:/dojofiles/dijit/themes/claro/claro.css">

    <script>dojoConfig = {parseOnLoad: true}</script>
    <script src="D:/dojofiles/dojo/dojo.js"></script>


    <script>

        showMyForm = function(){

            require(["Practice/practice"], 
            function(practice){

                var myObj = new practice();
                myObj.myPractice();
            });

        }
        showMyForm();       

    </script>


</head>
<body class="claro">

    <div id="myId" enctype="multipart/form-data" action="" method="POST">

</body>
</html

我在哪里以及如何添加data-dojo-attach-point并使用它来执行我的小部件？

Answer 1

如果您开始使用其他HTML节点扩展窗口小部件模板（ practice.html ），并且您希望从JavaScript窗口小部件代码中引用某些DOM节点（ practice.js ）然后使用附加点，例如：

<强> practice.html

<div>
  <input type="text" data-dojo-attach-point="textfield" />
</div>

<强> practice.js

var d = declare("Practice.practice", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
  widgetsInTemplate: true,
  templateString: _templateString,
  constructor: function(args) {
    declare.safeMixin(this, args);
  },
  someFunction: function() {
    console.log(this.textfield.value); // Now you can use this.textfield thanks to the attach point
  },
  postCreate: function(){
    this.inherited(arguments);
    var controller = new Controller(this);
    //controller.myPractice();
    this.myPractice = controller.myPractice;
  }
});

但是，我不太确定你是否熟悉data-dojo-attach-point的概念，因为它并不诚实地执行你的小部件。

Answer 2

Dojo附加点用于直接引用html模板的dom节点。

<div id="somenode"><span data-dojo-attach-point="anattachpoint"
     data-dojo-attach-event="click: clicked">Click me</span><br>
     <input data-dojo-attach-point="field"></div>

Javascript使用_AttachMixin声明dijit。

require([
    "dojo/_base/declare", "dojo/dom", "dijit/_WidgetBase", "dijit/_AttachMixin", "dojo/domReady!"
], function(declare, dom, _WidgetBase, _AttachMixin) {

    var MyDijit = declare([ _WidgetBase, _AttachMixin ], {
        clicked: function(e) { this.field.value = "I was clicked"; }
    })

    var mydijit = new MyDijit({}, dom.byId('somenode'));
    mydijit.startup();
})

这里的dojo-attach-point是＆＃34; field＆＃34; ，可以使用＆＃34; this.field在你的js文件中引用。＆＃34; 在此示例中，我们使用 this.field.value

访问具有dojo-attach-point 字段的dom的属性值

你可能会想，我们可以在html模板中使用id，然后在widget的js中使用dom.byId（）。但是如果创建了两个或更多个窗口小部件实例，它们都将具有相同的ID！ dom.byId调用不再足够精确，无法返回所需的节点。进一步参考：http://dojotoolkit.org/reference-guide/1.9/dijit/_AttachMixin.html

使用附加点

practice.html

practice.js

的test.html

2 个答案: