CODEWITHSUNDEEP
javascriptjsondojo
digital-pollution
digital-pollution

Reputation: 1074

Dojo 1.8 basic widget to display data

Just getting started with Dojo, I bet this is simple to resolve but it's driving me nuts

Here is a function that gets the JSON and loads the widget loads the widget

require([
    "dojo/request", 
    "dojo/dom", 
    "dojo/_base/array", 
    "customWidget/carouselWidget", 
    "dojo/domReady!",
    "dojo/json"
], function(request, dom, arrayUtil, carouselWidget, JSON){
    request("data/carousel.json", {
        handleAs: "json"
    }).then(function(data){
        var carouselContainer = dom.byId("learnCarousel");
 
        arrayUtil.forEach(data, function(item){
            var widget = new carouselWidget(item).placeAt(carouselContainer);
        });

    }, function(err){
        console.log(err);
    });
});

here is the widget

define(["dojo/_base/declare",
        "dijit/_WidgetBase", 
        "dijit/_TemplatedMixin", 
        "dojo/text!./template/carouselWidget.html"
],  function (declare, _WidgetBase, _TemplatedMixin, template) {
        return declare([_WidgetBase, _TemplatedMixin], {
            name: "no data",
            sauce: require.toUrl("./img/Desert.jpg"),
            templateString: template,
            baseClass: "carouselWidget"
        });
    });

here is the widget template

<div id="item">
    <img src="${baseClass}sauce" data-dojo-attach-point="imgNode" />
    <p>${baseClass}sauce</p>
    <p data-dojo-attach-point="nameNode">${baseClass}name</p>
</div>

I'm following from this tutorial http://dojotoolkit.org/documentation/tutorials/1.10/recipes/custom_widget/

it's almost there but instead of outputing the json data it just outputs the words.

carouselWidgetsauce
carouselWidgetname

I've been staring at it for a few hours now hoping a pair of fresh eyes might help.

Upvotes: 0

Views: 262

Answers (1)

digital-pollution
digital-pollution

Reputation: 1074

Sometimes just typing out the problem is the solve to solve it yourself.

just needed ${propertyName} not ${baseClass}

Upvotes: 1

Related Questions