I am trying to derive an "extended" Button from dijit/Form/Button. (I want to pass extra arguments to the constructor, and I want to encapsulate these preparations in my derived class. Button is just an example, I want to use this later with grids and trees.)
Unfortunately the code below fails with "TypeError: this._attachEvents is undefined" in the firefox javascript console. Some idea, what is wrong? The same code, including minimal HTML, is ready to run at http://jsfiddle.net/x9dLs8gz/1/
require(["dojo/_base/declare", "dijit/form/Button", "dojo/dom", "dojo/json", "dojo/domReady!"],
function (declare, Button, dom, json) {
declare("MyButton", Button, {
"-chains-": {
constructor: "manual"
},
constructor: function () {
//extra calculation will go here...
this.inherited(arguments);
}
});
new MyButton({
label: "Click Me!",
onClick: function () {
dom.byId("result").innerHTML += "Success";
}
}, "button").startup();
});
Cheers,
Dominic
If the "-chains-" value for the constructor method is either not set or set to "after", then the postscript method will be called after all of the inherited constructors have been fired. On the other hand, when specifying "manual", postscript is fired after the first constructor (in this case MyButton#constructor) is executed. As a result, _AttachMixins#buildRendering is fired before this._attachEvents has been set in _AttachMixins#constructor, causing the error you see.
Since specifying "manual" means that no chaining is assumed whatsoever, mixin contructors will never be called, even if this.inherited is correctly called up the chain. This makes sense, as the underlying C3MRO is thrown out the window.
If you need to continue using the "manual" setting in spite of this, you will need to 1) recreate any missing data yourself, 2) manually call the mixin constructors (e.g., _AttachMixin.prototype.constructor.call(this)), or 3) convert MyButton to a factory for Button:
var createButton = (function () {
var myButtonDefaults = { ... };
return function (kwArgs, id) {
var buttonId = id || 'button';
return new Button(lang.mixin({}, myButtonDefaults, kwArgs), buttonId);
};
})();
var myButton = createButton();
myButton.startup();
console.log(myButton instanceof Button); // true
You need to assign the declared class to a variable or declare in a different file and added it to the list of object in the require. Also dont use variable names which are keywords like "constructor". below is the fixed version of your example.
require(["dojo/_base/declare", "dijit/form/Button", "dojo/dom", "dojo/json", "dojo/domReady!"],
function(declare, Button, dom, json) {
var MyButton = declare("MyButton", Button, {
"-chains-": {
constructorType: "manual"
},
constructor: function() {
//extra calculation will go here...
this.inherited(arguments);
}
});
new MyButton({
label: "Click Me!",
onClick: function() {
dom.byId("result1").innerHTML += "Success";
}
}, "button").startup();
});
<div id="button"></div>
<div id="result1"></div>
Related
I have this vue component:
export default {
data: function() {
return {
editor: new Editor({
//some options
}),
}
},
computed: {
doc(){ // <--------------------- take attention on this computed property
return this.editor ? this.editor.view.state.doc : null;
},
},
watch: {
doc: {
handler: function(val, OldVal){
// call some this.editor methods
},
deep: true,
immediate: true,
},
},
}
Will computed property doc be dependent on a data property editor if I use this.editor only for checking if it is defined and not use it for assigning it to the doc? I mean, If I will change this.editor will doc be changed? Also, I have watcher on doc so I need to know if I will cause an infinite loop.
In the doc property computation, you use:
the editor property (at the beginning of your ternary, this.editor ? ...)
if editor exists, the editor.view.state.doc property
So the computation of doc will be registered by Vue reactivity system as an effect related to the properties editor and (provided that editor exists) to editor.view.state.doc. In other words, the doc property will be reevaluated each time one of these two properties changes.
=> to reply to the initial question, doc will indeed depend on editor.
This can be toned though, because by 'property change', we mean:
for properties of primitive types, being reassigned with a different value
for objects, having a new reference
So, in our case, if editor, which is an object, is just mutated, and that this mutation does not concern it's property editor.view.state.doc, then doc will not be reevaluated. Here are few examples:
this.editor = { ... } // doc will be reevaluated
this.editor.name = ' ... ' // doc will NOT be reevaluated
this.editor.view.state.doc = { ... } // doc will be reevaluated
If you want to understand this under the hood, I would recommand these resources (for Vue 3):
the reactivity course on Vue Mastery (free)
this great talk and demo (building a simple Vue-like reactivity system)
About the inifinite loop, the doc watcher handler will be executed only:
if doc is reassigned with a different value
in the case where docis an object, if doc is mutated (since you applied the deep option to the doc watcher)
The only possibility to trigger an infinite loop would be to, in the doc watcher handler, mutate or give a new value to doc (or editor.view.state.doc). For example (cf #Darius answer):
watch: {
doc: {
handler: function(val, OldVal){
// we give a new ref each time this handler is executed
// so this will trigger an infinite loop
this.editor.view.state.doc = {}
},
// ...
},
}
=> to reply to the second question, apart from these edge cases, your code won't trigger a loop. For example:
watch: {
doc: {
handler: function(val, OldVal){
// even if we mutate the editor object, this will NOT trigger a loop
this.editor.docsList = []
},
// ...
},
}
Changing editor variable should work, but changing Editor content may not, as it depends on Editor class and how it respects reactivity.
For example:
export default {
data: function() {
return {
editor: {text: '' }
}
}
}
...
this.editor.text = 'Text' // works
this.editor.text = {param: ''} // works
this.editor.text.param = 'value' // works
this.editor.param = {} // does't work, as creation of new property is not observable
If editor observer works and you are changing editor property in observer, which 'reinitializes' internal structures, it may lead to infinite loop:
var Editor = function() {
this.document = {}
this.change = () => { this.document = {} }
}
var data = new Vue({
data: () => ({
editor: new Editor(),
check: 0
}),
watch: {
editor: {
handler() {
this.check++
console.log('Changed')
if (this.check < 5)
this.editor.change()
else
console.log('Infinite loop!')
},
deep: true,
immediate: true
}
}
})
data.editor.change()
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
In such case, extra checking is necessary before making the change.
In my app, clicking a certain button changes its caption to a different one, and clicking it again changes it back to the default caption.
When clicking it I get this error message:
Uncaught TypeError: Cannot read property 'removeChild' of null
This doesn't make sense to me because there's no DOM manipulation here. I simplified my code as much as possible while keeping the error:
data () {
return {
ctaCaptions: [
'see case studies',
'hide case studies'
],
ctaCaption: ''
}
},
methods: {
handleClick () {
this.ctaCaption = this.ctaCaptions[1]
}
}
HTML:
<a
#click="handleClick"
v-html="ctaCaption"
/>
Any suggestion as to what causes this error?
methods: {
handleClick () {
this.ctaCaption = this.ctaCaptions[1]
}
}
Inside event handlers, this points to the event.target (in your case the HTMLButtonElement).
In your case, you want a reference to your component. You can achieve this in different ways:
Use explicit binding:
methods: {
handleClick () {
this.ctaCaption = this.ctaCaptions[1]
}.bind(this)
}
Or you can use an ES6 arrow function (these preserve the this at the moment of definition rather than at execution time):
methods: {
handleClick: () => {
this.ctaCaption = this.ctaCaptions[1]
}
}
For a more specific and precise insight, you'd have to show the HTML snippet which uses the model code you've shown. Also, no line in your showcased code uses removeChild.
I created a Custom Widget in Dojo
return declare("DrawTools", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
templateString: template,
layers: [],
constructor: function (featureLayerArr) {
},
postCreate: function () {
},
startup: function () {
var menu = new DropDownMenu({ style: "display: none;" });
var menuItem1 = new MenuItem({
label: "Save",
iconClass: "dijitEditorIcon dijitEditorIconSave",
onClick: function () { alert('save'); }
});
menu.addChild(menuItem1);
var menuItem2 = new MenuItem({
label: "Cut",
iconClass: "dijitEditorIcon dijitEditorIconCut",
onClick: function () { alert('cut'); }
});
menu.addChild(menuItem2);
menu.startup();
var button = new DropDownButton({
label: "hello!",
name: "programmatic2",
dropDown: menu,
id: "progButton"
}, this.drawToolsMenuNode).startup();
},
startMenu: function () {
}
});
Wdiget template is as follows
<div>
<div data-dojo-attach-point="drawToolsMenuNode"></div>
</div>
I am instantiating Widget in another Custom Widget as follows
var drawTools = new DrawTools(this.allLayersArr);
drawTools.placeAt(this.drawToolsNode);
drawTools.startMenu();
startup method for DrawTools widget is not getting called.
Need help in this regard.
Offical definition from dojo
startup():
Probably the second-most important method in the Dijit lifecycle is the startup method. This method is designed to handle processing after any DOM fragments have been actually added to the document; it is not fired until after any potential child widgets have been created and started as well. This is especially useful for composite widgets and layout widgets.
When instantiating a widget programmatically, always call the widget's startup() method after placing it in the document. It's a common error to create widgets programmatically and then forget to call startup, leaving you scratching your head as to why your widget isn't showing up properly.
So as Kirill mentioned, you need to call the startup method.
The alternative solution would be moving widget instantiation logic from ::startup() to ::postCreate(), since ::postCreate() will be called for sure.
I am looking for a functionality like below in dojo class (AMD).
function () {
var _foo = 123; // private variable
return {
get foo () { return _foo; }
};
}());
The advantage is once the value _foo is initialised user can't modify the value _foo or foo from the console. How do we achieve this in dojo class like
define["dojo/_base/declare", "dojo/request", "dojo/_base/lang"],
function(declare, request, lang) {
var _foo = 123;
return declare("fooClass", null, {
get foo () { return _foo; }
});
});
when i declare as above when we try to build the class using dojo build.sh it is giving parsing errors.how to make a value not changeable from debug console in dojo
There is not really an advantage with your solution, as if an user open the debugger console, a developer could set a breakpoints at var _foo =123; and change its value at run time any time.
In your code actually you are showing an example of a closure.
A closure allow your var _foo to be hidden inside your function() so a developer would not be able to get that value within its js code.
Nevertheless you can still access it using the debugger console adding a simple breakpoint.
If you are interesting to use getter and setter for dojo, please read on.
The dojo naming convention to specify a custom getter or setter (in this example for an attribute named foo) is:
_setFooAttr() and _getFooAttr()
Example:
require([
"dojo/_base/declare", "dojo/dom-style", "dojo/parser", "dojo/ready",
"dijit/_WidgetBase", "dijit/_TemplatedMixin"
], function(declare, domStyle, parser, ready, _WidgetBase, _TemplatedMixin){
declare("HidePane", [_WidgetBase], {
// parameters
open: true,
// custom setter
_setOpenAttr: function(/*Boolean*/ open){
this._set("open", open);
domStyle.set(this.domNode, "display", open ? "block" : "none");
}
});
ready(function(){
parser.parse();
});
});
i have a call back method which is called by other class when some event occurs, which send some objects as parameters
loadingIsDone : function(evt)
{
console.log(evt);
for(var i=0; i<evt.layers.length;i++)
{
var row = new _LayerRow(evt.layers[i].layer);
domConstruct.place(row.domNode,this.containerDiv,"last");
}
}
for each object which is received i need to create a Custom widget called _LayerRow, which is having one Checkbox and a Label
When i debug this code the pointer is not coming to the 2nd line of the loop.
and no error in the console..
but when i call the same in different file as below for testing purpose
var obj = new Object();
obj.id = "124";
obj.name = "Chiru";
var lay = new _LayerRow(obj);
domConstruct.place(lay.domNode,win.body(),1);
The _LayerRow widget is working fine
_LayerRow.js
define([
"dojo/_base/declare",
"dijit/_WidgetBase",
"dijit/_OnDijitClickMixin",
"dijit/_TemplatedMixin",
"dojo/text!../templates/_layerrow.html"
], function (declare, _WidgetBase, _OnDijitClickMixin,_TemplatedMixin, template) {
return declare([_WidgetBase,_OnDijitClickMixin, _TemplatedMixin], {
templateString: template,
layer : null,
constructor : function( layerObj)
{
this.id = layerObj.id;
this.layer = layerObj;
},
postCreate : function()
{
this.inherited(arguments);
this.layerName.innerHTML = this.layer.name;
}
});
});
and templates/_layerrow.html
<div>
<input type="checkbox" id="${id}">
<label for="${id}" data-dojo-attach-point="layerName"></label>
</div>
Any idea why its not working.. how can i find the issue in this
Most common reason for callbacks to fail is incorrect scope.
Because in asynchronous callbacks such as above, the context that the code is executing in has changed. It will no longer refer to the object that originally provided it, but its context will now refer to the enclosing object, the callback. To get around this, you can use hitch() to force the function to retain its original context
I see a reference to this in your callback, use hitch to correct the scope.
More info: http://dojotoolkit.org/reference-guide/1.9/dojo/_base/lang.html#hitch