Add a fresh widget to the DOJO attachment point without overwriting

Question

Add a fresh widget to the DOJO attachment point without overwriting

Here is some code I have:

    postCreate: function() {
        this.items.forEach(lang.hitch(this, function(item) {
            new SideNavigationItem({
                name: item.name
            }, this.container);
        }));
    }

This code snippet adds a new list item (li) to a unordered list (ul). The ul template has an attach point where I want to append all the li items, but currently, each iteration replaces the content inside the attach point with the next li being created.

Any suggestions on how I can accomplish this without replacing the existing content?

javascript dojo

Answer 1

Answer №1

Consider using the _WidgetBase placeAt() method instead to achieve the desired outcome. This method is similar to the domConstruct place() method.

Example
// Insert a new button at the beginning of a specific div
var button = new Button({ label:"click" }).placeAt("wrapper","first");

If you don't include the third parameter, the default position will be 'last', which is typically what you need.

Template

<ul data-dojo-attach-point="myAttachPoint" >
    <li>existing list item</li>
</ul>

JavaScript

    this.items.forEach(lang.hitch(this, function(item) {

         var listItem = new SideNavigationItem({name: item.name});
         listItem.placeAt(this.myAttachPoint);

         //if that doesn't work try it just with plain <li> item
         //var listItem = domConstruct.toDom("<li></li>");
         //domConstruct.place(listItem, this.myAttachPoint);
    }));

Answer 2

Consider using the _WidgetBase placeAt() method instead to achieve the desired outcome. This method is similar to the domConstruct place() method.

Example
// Insert a new button at the beginning of a specific div
var button = new Button({ label:"click" }).placeAt("wrapper","first");

If you don't include the third parameter, the default position will be 'last', which is typically what you need.

Template

<ul data-dojo-attach-point="myAttachPoint" >
    <li>existing list item</li>
</ul>

JavaScript

    this.items.forEach(lang.hitch(this, function(item) {

         var listItem = new SideNavigationItem({name: item.name});
         listItem.placeAt(this.myAttachPoint);

         //if that doesn't work try it just with plain <li> item
         //var listItem = domConstruct.toDom("<li></li>");
         //domConstruct.place(listItem, this.myAttachPoint);
    }));

Add a fresh widget to the DOJO attachment point without overwriting

Answer №1

Similar questions

Obtain information from a CSV document within Highchart Angular

Relocating to the middle of the webpage (Automatically resize for mobile compatibility if feasible)

How to dynamically set Bootstrap navbar item as active based on current filename?

Tips on integrating the createjs library into a ReactJS project

React hooks - Issue with updating state properties within sidebar display

"Learn how event bubbling in jQuery works with the use of .delegate() or .live() methods

Leveraging the power of a JavaScript framework within the script tag

Incorporate several websites into a React application without using iframes

Tips for avoiding $state refresh in Components unaffected by changes to $state.var?

Transferring information between two separate components

Tap the mobile menu button twice to toggle the menu

Encountering difficulty locating a module despite following the correct path according to the official NEXT.js documentation

React Typescript: exploring the power of dynamic types

Check if the content key Json exists by implementing Vue

Tips for effectively redirecting traffic to another website

I am attempting to retrieve the information entered into the textbox, search for it within my database, and display the results beneath the textbox for reference

Posting photos to MongoDB using Node.js and Express

Leveraging client API callback variables within a Node.js backend system

Enhancing the efficiency of typed containers in JavaScript

Manually validate inputs in Angular