B4J Question [BANano] [SOLVED] The relationship between mTarget and mElement and the .Remove method

[Mashiane]

Ola

I'm trying to undertstand the mTarget variable on the custom view design specifically on the Remove sub.

When creating custom views, their HTML is appended to a target element. For example.

mElement = mTarget.Append($"<${mTagName} id="${mName}" ${exattr}>${mText}</${mTagName}>"$).Get("#" & mName)

this mTarget is also a person of interest when adding to parent.

'add component to parent
public Sub AddToParent(targetID As String)
    mTarget = BANano.GetElement("#" & targetID.ToLowerCase)
    DesignerCreateView(mTarget, Null)
End Sub

Now interestingly, there is a Remove sub where the same person of interest appears as mTarget.Empty , which is.

'remove component
public Sub Remove()
    mTarget.Empty
    BANano.SetMeToNull
End Sub

On the Remove sub, mTarget.Empty (removes all child nodes for the matched elements), meaning that the parent holder for mElement is cleared, this could include any other child element that I might not want to remove from mTarget.

I can remove mTarget.Empty as that is not the behavior I want when a child is removed, the parent should not be cleared. Am I understanding this right?

Thanks.

 

[alwaysbusy]

You can clear whatever you want but as a general rule the developer of a BANanoCustomView should make sure that it is possible to re-add the exact same component to the same target after the component has been removed. Most sense would be cleaning up all html and events from the original target that was used when adding/setting them.

But in some cases (e.g. one parent has more than one child) it may indeed be needed to use (one or more) .Remove methods instead of a mTarget.Empty (but again, this depends on how the component is constructed)
For example, in a one of my libs I have a Fab button with some subbuttons, constructed like this:

mElement = mTarget.Append($"<div id="${mName}buttons" class="inner-fabs"></div><div id="${mName}" data-return="${mName.ToLowerCase}" class="skfab ${mClasses}" style="${exStyle}${mStyle}"><i id="${mName}icon" class="fa fa-plus"></i></div>"$).Get("#" & mName)
mElementButtons.Initialize("#" & mName & "buttons")

Simplefied html:

<div inner-fabs></div>
<div fab>
    <i icon></icon>
</div>

as you can see, it has no wrapper around both divs.

So cleaning it up consists of two .removes here (the main fab button + all the sub buttons)

public Sub Remove()
    mElement.Remove ' removes the element and everything in it (the fab)
    mElementButtons.Remove ' the div that wraps all sub buttons
    BANano.SetMeToNull
End Sub

Just be careful that after the CustomViews Sub Remove() has been executed, the target still exists.

Alwaysbusy

 

[Mashiane]

Thanks, that makes it clearer. In my case I just want to deal with that element alone and not the parent. So I will have to remove the mTarget.Remove code for now and replace it with mElement.Remove.

In the same breath, does mElement.Remove also remove all the events linked to that particular element or this is done by BANano.SetMeToNull?

If the events are indeed removed, what happens to any other element somewhere in another module that calls that same event? Does the event binding for them still remain?

Thanks again.

 

[alwaysbusy]

No, you must turn them off in the remove sub. This is probably only important if you later add the same one again (the event could be raised twice). A off().On() can prevent that, but cleaning them up at remove time may be more efficient in the long run.