Question

I have a need to bind some HTML to an object, but my issue is that I don’t know the properties of the object at development time.

I have a selectedItem property in my main view model which I have bound to a section in my HTML:

<div data-bind="with: selectedItem">

</div>

Now I want to generate a table based on the property name and property values:

<div data-bind="foreach: [WHAT DO I PUT HERE?]">
    <label class="control-label"><span data-bind="text: [OR HERE?]" /></label>
</div>

I have really no idea how to do this. Any help is greatly appreciated.

Also, just slightly extending this, I would like to handle the properties of the bound object differently, such as, if the property is just a primitive type, just output it, but if its another object/array, then handle it specially.

Can this be done?

Answer 1

Here is a working example using computed observable to select at runtime the data to show. Dynamically selected templates are also used to render the data according to the type of data to render (array or scalar).