I have a widget on a page that subscribe to a topic. When I click a button the page publishes and a function called refreshMe() will be called and the context is changed and finally the widget re-render itself to display the new text from "orange" to "apple". But I got error "this.render is not a function". Any help is appreciated.
Here is the code:
<head>
<title>Dojo Widgets Test page</title>
<script type="text/javascript">
djConfig={
"isDebug": true,
"parseOnLoad": true,
"baseUrl": "../dojolib/dojo/"
};
</script>
<script
type="text/javascript"
src="../dojolib/dojo/dojo.js">
</script>
<script type="text/javascript">
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
dojo.require("dijit._Widget");
dojo.require("dojox.dtl._HtmlTemplated");
dojo.declare("demo",
[dijit._Widget, dojox.dtl._HtmlTemplated],
{
fruit:"",
templateString: "<div><h3>I like {{ fruit }} very much</h3></div>",
constructor: function() {
var topic = dojo.subscribe("myTopic",this.refreshMe);
},
postCreate: function(){
this.fruit = "orange";
this.render();
},
refreshMe:function(){
alert("refreshed");
this.fruit = "apple";
this.render();
}
}
);
</script>
<script type="text/javascript">
callRefreshMe = function() {
dojo.publish("myTopic",["apple"]);
}
</script>
</head>
<body>
<div dojoType="demo" id="fruitid"></div>
<input type=button onClick="callRefreshMe()" value="Change">
</body>
<title>Dojo Widgets Test page</title>
<script type="text/javascript">
djConfig={
"isDebug": true,
"parseOnLoad": true,
"baseUrl": "../dojolib/dojo/"
};
</script>
<script
type="text/javascript"
src="../dojolib/dojo/dojo.js">
</script>
<script type="text/javascript">
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
dojo.require("dijit._Widget");
dojo.require("dojox.dtl._HtmlTemplated");
dojo.declare("demo",
[dijit._Widget, dojox.dtl._HtmlTemplated],
{
fruit:"",
templateString: "<div><h3>I like {{ fruit }} very much</h3></div>",
constructor: function() {
var topic = dojo.subscribe("myTopic",this.refreshMe);
},
postCreate: function(){
this.fruit = "orange";
this.render();
},
refreshMe:function(){
alert("refreshed");
this.fruit = "apple";
this.render();
}
}
);
</script>
<script type="text/javascript">
callRefreshMe = function() {
dojo.publish("myTopic",["apple"]);
}
</script>
</head>
<body>
<div dojoType="demo" id="fruitid"></div>
<input type=button onClick="callRefreshMe()" value="Change">
</body>
mmmm, hitch.
you need to set the context in your subscribe I think:
... constructor:function(){ dojo.subscribe("myTopic",dojo.hitch(this,"refreshMe")); }, ...dojo.hitch is like magic.
Magic! Indeed
Thanks a lot!