Динамический макет в JS/CSS/HTML

Question

В моем приложении пользователи определяют макеты документов. Эти макеты обычно являются логически таблицами, поэтому пользователи указывают, какое «свойство» будет отображаться в ячейке. Они также могут определять количество строк и столбцов, а также количество строк или столбцов, которые будет принимать свойство (collspan и rowspan в терминологии HTML).

Теперь для данного макета документа и набора документов мне нужно отобразить его в браузере.

Я хотел бы сделать это на стороне клиента, возможно, используя jQuery или/и Knockout.js, или некоторые другие рамки/библиотеки.

Прежде чем я начну изобретать колесо, может ли кто-нибудь указать мне в правильном направлении?

Answer 1

Не уверен, что это действительно имеет значение. Это совершенно открыто для интерпретации, но здесь.

Определите свой LayoutViewmodel с помощью набора многомерных наблюдаемых массивов. Каждый индекс в многомерном массиве соответствует объекту Property, который содержит данные о rowspan, colspan и т. Д. (Не уверен, какие данные вам нужны).

Показать расположение с помощью foreach крепления. У вас, скорее всего, есть два из них: один для выбора и один для отображения. Ниже приведена моя попытка отображения.

<table data-bind="foreach: rows"> 
    <tr data-bind="foreach: columns"> 
     <td data-bind="attr: { colspan: colspan, rowspan: rowspan }, text: name"> 
     </td> 
    </tr> 
</table> 

Надеюсь, это поможет.