Binding object's properties and array's items

gitana / alpaca

Alpaca provides the easiest way to generate interactive HTML5 forms for web and mobile applications. It uses JSON Schema and simple Handlebars templates to generate great looking, dynamic user interfaces on top of Twitter Bootstrap, jQuery UI, jQuery Mobile and HTML5.

http://www.alpacajs.org

Other

1.29k stars 370 forks source link

Binding object's properties and array's items #549

Open strainovic opened 7 years ago

strainovic commented 7 years ago

I'm unable to find proper solution for binding object properties or array items fields like we can bind top level elements into layout template.

For example:

"user": {
  "type": "object",
  "properties": {
    "firstName": {
      "type": "string"
    },
    "lastName": {
      "type": "string"
    }
  }
};

I'm able to bind user object and it will add firstName and lastName automatically one by one into DOM but I can't rearrange them as I wish or user custom layout for whole object.

Is there any solution for this situation?

Thanks!

MetaAbstract commented 7 years ago

Odering

strainovic commented 7 years ago

Thanks @MetaAbstract but it is not what I want to achieve. With order options I can only rearrange display order, but I cannot add custom loyout for whole object and sub-properties.

Here is an example:

<div data-alpaca-layout-binding="user"></div>

That's how I can bind user object with div DOM element but I cannot do something like this:

<div data-alpaca-layout-binding="user">
  <ul class="collapsible popout" data-collapsible="accordion">
    <li>
      <div class="collapsible-header active"><span class="accordion-number">1</span>First Name</div>
      <div class="collapsible-body">
        <div data-alpaca-layout-binding="firstName"></div>
      </div>
    </li>
    <li>
      <div class="collapsible-header"><span class="accordion-number">2</span>Last Name</div>
      <div class="collapsible-body">
        <div data-alpaca-layout-binding="lastName"></div>
      </div>
    </li>
  </ul>
</div>

MetaAbstract commented 7 years ago

I am not deeply dived in layout, but i think you need to combine twitter bootstrap css,js capabilities for example with alpaca capabilities in custom template.

strainovic commented 7 years ago

I've found this example but it simple does not work.

Customer Profile - Edit with Custom View

If you look at the source you'll find /address section with his own layout, template and bindings properties but it does not work. Layout bindings only works for the top level schema elements but not for sub-elements. Only what I can do is to add fieldClass or labelClass CSS styles but it won't let me to add custom html code into layout as I've already shown above.