I am trying to use dijit/layout/TabContainer with dojox/mvc/Repeat. It seems that as the indivdual tab panes (contentPanes) are not immediate children of the tab container it does not render them as tabs. I end up with three content panes but no tabs.
I have created a paste bin which shows the issue. I have included a text box which binds to the stateful model to show that the scope is correct on the repeater.
http://jsbin.com/tufuzini/1/edit?html,output
Has anyone experienced this or have an alternative?
dojox/mvc/Repeat is a deprecated module as it has been take over by dojox/mvc/WidgetList. It'll allow you to place multiple occurrence of a template widget as immediate child of another widget, for example, dijit/layout/TabContainer. Here's an example:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js" data-dojo-config="parseOnLoad: 0, async: 1"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/resources/dojo.css">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/claro/claro.css">
<script>
require([
"dojo/_base/declare",
"dojo/aspect",
"dojo/parser",
"dojox/mvc/getStateful",
"dojox/mvc/Templated",
"dojox/mvc/WidgetList",
"dijit/layout/TabContainer",
"dojox/mvc/Element",
"dojo/domReady!"
], function(declare, aspect, parser, getStateful, Templated, WidgetList){
tabRecords = getStateful({
items: [
{first: "Anne", last: "Ackerman"},
{first: "Ben", last: "Beckham"},
{first: "Chad", last: "Chapman"}
]
});
declare("my.Templated", Templated, {
templateString: document.getElementById("innerTemplate").innerHTML
});
parser.parse();
});
</script>
<script id="innerTemplate" type="dojox/mvc/InlineTemplate">
<div>
<div>First: <input type="text" data-dojo-type="dojox/mvc/Element" data-dojo-props="value: at('rel:', 'first')"></div>
<div>Last: <input type="text" data-dojo-type="dojox/mvc/Element" data-dojo-props="value: at('rel:', 'last')"></div>
</div>
</script>
</head>
<body class="claro">
<script type="dojo/require">at: "dojox/mvc/at"</script>
<div data-dojo-type="dijit/layout/TabContainer"
data-dojo-mixins="dojox/mvc/WidgetList"
data-dojo-props="partialRebuild: 1, children: at(tabRecords, 'items')"
data-mvc-child-type="my.Templated"
data-mvc-child-props="title: at(this.target, 'first')">
</div>
</body>
</html>
Best,
Akira
Related
I want to use Element UI in IE 11,and when i user the tree component,it creates errors.
It will create the error
Failed to generate render function:
SyntaxError 'missing in'
I want to show a icon before the text.But in IE 11,it errors while Chrome ok.
Anyone can tell me the problem..thx
the whole demo is
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MLLRSJ</title>
<link rel="stylesheet" href="./Scripts/assets/Element/index.css">
<script src="./Scripts/assets/vue/vue.js"></script>
<script src="./Scripts/assets/Element/index.js"></script>
</head>
<body>
<div id='Element'>
<el-tree :data="tree" :props="treeProps">
<span slot-scope='{node,data}'>
<i class='el-icon-check'></i>
<span style="display:inline" v-html='node.label'></span>
</span>
</el-tree>
</div>
</body>
<script>
var vm = new Vue({
el:'#Element',
data:{
tree:[{
label:'1',
children:[{
label:'1-1'
}],
},
{
label:'2',
children:[
{
label:'2-1'
}
]
}
],
treeProps:{
label:'label',
children:'children'
}
}
})
</script>
</html>
Try to avoid curly braces(in slot-scope in your example) and arrow functions in inline templates if you work with IE11 (I had same problem in one of my projects):
<el-tree :data="tree" :props="treeProps">
<span slot-scope='someObject'>
<i class='el-icon-check'></i>
<span style="display:inline" v-html='someObject.node.label'></span>
</span>
</el-tree>
I'm studying Dojo 1.10.4, my problem is that the onClick event does not work on dijit/MenuItem. I tried it on other item widgets like dijit/CheckedMenuItem and dijit/RadioMenuItem, none of their click events work, and the API docs didn't give any tips about it.
At last, I found it only works if it's contained in dijit/MenuBar. Should Item widgets be contained in dijit/MenuBar or dijit/Menu? How are the events processed on dojo widgets?
For example:
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"
data-dojo-config="async:true,parseOnLoad: true"></script>
<script>
require(["dojo/parser"],function(parser){
parser.parse();
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/MenuBar" >
<div data-dojo-type="dijit/MenuItem" onclick="alert();">it works</div>
</div>
<div data-dojo-type="dijit/MenuItem" onclick="alert();">it doesn't work</div>
</body>
</html>
In this case MenuItem needs a ContainerWidget like Menu or MenuBar. You add the Item as a child like :
require([
"dojo/dom",
"dijit/MenuItem",
"dijit/DropDownMenu",
"dijit/form/DropDownButton"
],
function(dom,MenuItem,DropDownMenu,DropDownButton){
var myMenu = new DropDownMenu();
var menuItem1 = new MenuItem({
id:"M1",
label:"Show M1",
onClick:function(){
//do what you want to do here
}
});
myMenu.addChild(menuItem1);
});
Studying this might help you too to understand how it works.
http://dojotoolkit.org/reference-guide/1.10/dijit/DropDownMenu.html#dijit-dropdownmenu
Regards
I was wondering why dojo isn't responding to changes on a element?
I made an easy example to show my problem!
<html >
<head>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='../dojo/dojo.js'></script>
<script>
require([
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane"
]);
require(["dojo/dom","dojo/on","dojo/domReady!"], function(dom, on){
on(dom.byId("tester"),"resize", function() { console.log('window on resize') });
});
</script>
</head>
<body>
<div data-dojo-type="dijit/layout/ContentPane" style="width: 50%;" >
<div data-dojo-type="dijit/layout/BorderContainer" id="tester">
</div>
</div>
</body>
</html>
Everything works fine when I use on(window,"resize", function()); but I have no idea why the example above doesn't work.
Try this (use aspect instead of on):
<html >
<head>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='../dojo/dojo.js'></script>
<script>
require([
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane"
], function(BC, CP){
require(["dojo/aspect","dojo/domReady!"], function(aspect){
var bc= new BC({}, "tester");
bc.startup();
aspect.after(bc, "resize", function() { console.log('window on resize') });
});
});
</script>
</head>
<body>
<div id="tester" style="width: 50%;height:100%;">
</div>
</body>
</html>
I am having trouble getting a reference to the dijit form widget when the form contains a DateTextBox. The code snippet below demonstrates the problem. When executed, the alert box says "undefined". However, if I get rid of <input ... id="dateTextBox"... />, I am able to get a reference to the form widget.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dijit/themes/claro/claro.css" media="screen">
<!-- load dojo and provide config via data attribute -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad: true">
</script>
<script type="text/javascript">
require(["dijit/form/TextBox", "dijit/form/DateTextBox"]);
</script>
<script type="text/javascript">
require(["dojo/parser", "dijit/registry", "dijit/form/Form", "dojo/domReady!"],
function(parser, registry) {
parser.parse();
alert(registry.byId("frm_test"));
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/form/Form" id="frm_test" encType="multipart/form-data" action="" method="">
<input type="text" id="textBox" name="textBox" data-dojo-type="dijit/form/TextBox" />
<input type="text" id="dateTextBox" name="dateTextBox" data-dojo-type="dijit/form/DateTextBox" />
</div>
</body>
</html>
I'd recommend wrapping the registry.byId into a ready call.
Keep parse onLoad: true, remove
require(["dijit/form/TextBox", "dijit/form/DateTextBox"]);
as the parser will auto require (when dojo>= 1.8) and use the following:
<script type="text/javascript">
require(["dojo/ready", "dijit/registry", "dojo/domReady!"],
function(ready, registry) {
// by default the prioirty of this ready call will be after the
// ready call used to parse when parseOnLoad is true
ready(function() {
alert(registry.byId("frm_test"));
});
});
</script>
Note that waiting for dojo/domReady! to fire is often not sufficient
when working with widgets. Many widgets shouldn’t be initialized or
accessed until the following modules load and execute:
dojo/uacss
dijit/hccss
dojo/parser
Thus when working with widgets you should generally put your code
inside of a dojo/ready() callback
http://dojotoolkit.org/reference-guide/1.9/dojo/domReady.html
http://dojotoolkit.org/reference-guide/1.9/dojo/ready.html#dojo-ready
I have the following code, straight from the tutorial:
<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="js/dijit/themes/claro/claro.css" />
<script src="js/dojo/dojo.js" data-dojo-config="async: 1, parseOnLoad: 1"></script>
<script>
require(["dojo/_base/fx", "dojo/on", "dojo/dom", "dojo/parser", "dojo/domReady!"], function(fx, on, dom, parser)
{
var fadeOutButton = dom.byId("fadeOutButton"),
fadeInButton = dom.byId("fadeInButton"),
fadeTarget = dom.byId("fadeTarget");
on(fadeOutButton, "click", function(evt)
{
fx.fadeOut({ node: fadeTarget }).play();
});
on(fadeInButton, "click", function(evt)
{
fx.fadeIn({ node: fadeTarget }).play();
});
});
</script>
</head>
<body class="claro">
<button data-dojo-type="dijit/form/Button" type="button" id="fadeOutButton">Fade block out</button>
<button data-dojo-type="dijit/form/Button" type="button" id="fadeInButton">Fade block in</button>
<div id="fadeTarget" style="background: red; height: 256px">
A red block
</div>
</body>
</html>
My goal is to have Dojo style the buttons. As far as I can see, this is done by the parser. The problem with this is that the parser will change the id of the button elements and therefore the events will not be triggered. If I remove dojo/parser from require or change parseOnLoad to 0, the buttons work, but they are not style. With the code above, buttons are styled but do not work. Is it possible to have both?
I think I figured it out -- I have to use registry.byId instead of dom.byId