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
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744268945a4566003.html
评论列表（0条）