backdraft 组件是否对插入它的 dom 元素有任何可见性？

Question

Using backdraftjs I want to do a customized fancy select widget similar to chosen.js.

My thought was that I could have markup like this:

<div id="bobSelect">
     <select name="bob">
          <option>Bob Crane</option>
          <option>Bob Hope</option>
          <option>Bob Melvin</option>
          <option>Bob Dobbs</option>
      </select>
</div>

Then I'd replace it via something like

render(FancySelectComponent, {}, 'bobSelect', 'replace');

...and in FancySelectComponent I would grab things like the options from bobSelect .

However it looks like there's no way for FancySelectComponent to have visibility into the dom element where it will eventually be inserted. Is that right?

So instead maybe in render I need to do something like

render(FancySelectComponent, {basedOn: 'bobSelect'}, 'bobSelect', 'replace');

Does that make sense?

Answer 1

You are correct; as written,

render(FancySelectComponent, {}, 'bobSelect', 'replace');

FancySelectComponent's constructor is not provided any information about the existing DOM tree rooted at div#bobSelect . In fact, the render application above is just syntax sugar for...

let result = new FancySelectComponent({});
let replacedNode = document.getElementById('bobSelect');
let parentNode = replacedNode.parentNode;
parentNode.removeChild(replacedNode);
parentNode.appendChild(result.render());
return result;

(note: in your example, both the replaced and replacing node are single nodes, but render can handle cases when either or both are a forrest of nodes)

You are also correct that, if you want access to the existing div#bobSelect , then you can pass it directly to the constructor via the second argument to render:

render(
  FancySelectComponent, 
  {replacingDiv:document.getElementById('bobSelect')}, 
  'bobSelect', 
  'replace'
);