Possible dom in json format?

R

rinatr2016-09-15 22:06:45

JavaScript

rinatr, 2016-09-15 22:06:45

Good afternoon!
I'm interested in the following question:
Is there any library that allows you to turn such code:

{
            html: [{
                        'body':
                        {
                            id: 'test',
                            OnLoad: function()
                            {
                                alert(1);
                            },
                            content: 
                            [{
                              'div':
                              {
                                  id: 'test2', 
                                  content: [
                                      {
                                          'input':
                                          {
                                             type: 'text',
                                              name: 'test',
                                              value: '222'
                                          }
                                        'input':
                                          {
                                             type: 'text',
                                              name: 'test2',
                                              value: '222'
                                          } 
                                      }
                                  ]
                              }
                            }]
                        }
                    }]

AT:

<html>
<body id = "test">
  <div id ="test2">
     <input type = "text" name = "test" value = "222" />
    <input type = "text" name = "test" value = "222" />
 </div>
</body>
</html>
<script>
  
</script>

I really liked this writing approach in different libraries (ext.js, webix, qooxdoo, etc.), I wanted to slightly modify one ui library to write like that too, but it strictly clings to home elements.
Great googling - I found nothing but bemjson.
But it seems to me that it was created for a slightly different purpose. Maybe there is something else, simpler? And if there is nothing, how suitable is BEM for such a case? For example, I need everything (OnLoad, click, etc., events and methods to be generated not in html according to the same principle, but stored in a separate file and somehow associated with the parent element by id).

Reply

Answer the question

In order to leave comments, you need to log in

4 answer(s)

I

i, 2016-09-16
@rinatr

Yes it is possible, for example BEMJSON :

{
  tag : 'div',
  attrs : {
    id : 'anchor1',
    name : 'BEM',
  },
  content : [
    {
      tag : 'div',
      attrs : {
        id : 'anchor2',
        name : 'BEM 2',
      },
      content : 'BEM text'
    },
  ]
}

After running through the standard BEMHTML templates, we get ( live example ):

<div id="anchor1" name="BEM">
    <div id="anchor2" name="BEM 2">BEM text</div>
</div>

It may also be suitable for your task BEMTREE . With the help of BEMTREE, a JSON data processing template is described that converts the data into BEMJSON and then we get HTML through BEMHTML. Example:
There is data:

{
  "content": "BEM Block!",
  "title": "I am BEM"
}

We describe data transformation in BEMJSON using BEMTREE technology:

block( 'someBlock' )(
  def()( function () {
    var data = this.ctx.data || {};
    this.ctx.content = [
      { elem : 'title', content : data.title || 'Empty title' },
      { elem : 'content', content : data.content || 'Empty content' },
    ];
    return applyNext();
  } )
);

After applying on the data, we will get BEMJSON, all that remains is to apply BEMHTML. This is what two-pass templating is .
Here jsfiddle.net/ilyar/5dw8Q and here https://goo.gl/GRGSFf - a live example of using BEMTREE in the browser (you can also use the same templates on the server).

S

sim3x, 2016-09-15
@sim3x

The absence of such libraries should make you think that it is not worth it

K

Konstantin B., 2016-09-16
@Kostik_1993

BEMJSON

X

xmoonlight, 2016-09-16
@xmoonlight

It is possible to modify the nano code as it is almost the same format and made as needed.