admin管理员组文章数量:1400599
I'm newbie to dojo. I have created widget and executed it successfully. But now I want to use the concept of attach point here. Below is my code
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;
});
And I'm executing this by using 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
Where and how can I add data-dojo-attach-point and use it to execute my widget?
I'm newbie to dojo. I have created widget and executed it successfully. But now I want to use the concept of attach point here. Below is my code
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;
});
And I'm executing this by using 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
Where and how can I add data-dojo-attach-point and use it to execute my widget?
2 Answers
Reset to default 2If you start expanding your widget template (practice.html) with additional HTML nodes, and you would like to refer to some DOM node from within your JavaScript widget code (practice.js) then you use attach points, for example:
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;
}
});
However, I'm not quite sure if you're familiar with the concept of data-dojo-attach-point, because it doesn't execute your widget to be honest.
Dojo attach points are used to refer html template’s dom nodes directly.
<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 to declare a dijit using _AttachMixin.
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();
})
Here the dojo-attach-point is "field" and can be referred in your js file using "this.field." In this example we are accessing attribute value of the dom which has dojo-attach-point field using this.field.value
You might think,we could just use ids in the html template, and then dom.byId() in the widget’s js. But if two or more widget instances are created, they’ll all have the same ids! The dom.byId call is no longer precise enough to return the node you want. Further reference : http://dojotoolkit/reference-guide/1.9/dijit/_AttachMixin.html
本文标签： javascriptUse attach pointStack Overflow
版权声明：本文标题：javascript - Use attach point - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744268945a2598085.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论