将HTML属性绑定到XML数据源

Question

I am not that familiar with the whole SGML family... I need to develop a small website which is part of an installation process of an application. The website shows permanently the features which were selected during the installation process. The website is fine - thanks to Bootstrap. But now I want to hide or show elements on this website according to the selection in the installation process.

During the installation I can modify an XML file. My idea is to bind the HTML attributes to the XML data.

Example XML I can modify during my installation process:

<features>
 <feature>
  <name>Feature 1</name>
  <visible>hidden</visible>
 <feature>  
<features>

HTML idea:

<div class="feature1" VISIBLE_VALUE_FROM_XML>
 <img src="./img/feature1"/>
</div>

Is it somehow possible to bind both? What are the relevant keywords here? What alternatives do I have? Do you have any good reading sources?

Thanks!

[EDIT]:

Perhaps the question was too trivial for you. I guess I was too limited in Data Binding thinking. So, the following steps do the trick:

1. leave your desk
2. grab a coffee
3. smoke a cigarette, if you like
4. use JS and traverse the XML tree

Answer 1

Here You GO!

With these steps you can do it.

Step 1 : Convert your XML to JSON using any one of the libraries (like jquery XML2JSON)

Step 2 : Select your "DIV" with id with jquery($("#yourid")) and modify the visibility according to the value of the visibility property in your json

(e.g)

if(json[feature].visibility=="hidden")
{
$("#yourid").hide();
}