|
Сообщение от Erolast
|
|
Можно еще проще
|
а вот ни разу не проще
Пример "рутового" шаблона простого приложения на ангуляре. Разумеется, внутри него есть другие компоненты.
Просто верстать, просто читать, просто поддерживать. Аналогичного хочется и от реакта.
<body>
<div class="page">
<div ng-app="insider" class="insider">
<div ng-controller="insider.DefaultController" ng-cloak="">
<div ng-if="app.isReady">
<div class="insider__controls affix btn-group-vertical">
<div ng-repeat="config in app.tools track by config.id" ng-insider-node="config"></div>
</div>
<div class="insider__header">
<div class="container-fluid">
<div class="modes">
<div class="row">
<div class="col-4">
<h3>Mode</h3>
<select ng-change="app.setModeById(app.model.modeId)" ng-model="app.model.modeId" ng-options="mode.id as mode.title for mode in app.dictionaries.modes" class="form-control"></select>
</div>
<div ng-show="app.isFilterMode()" class="col-4">
<h3>Presets</h3>
<select ng-change="app.setPresetById(app.model.presetId)" ng-model="app.model.presetId" ng-options="preset.id as preset.title for preset in app.presets" class="form-control"></select>
</div>
<div class="col-4">
<h3>Chunk</h3>
<select ng-change="app.searchAsync()" ng-model="app.pagination.itemsPerPage" ng-options="chunk.value as chunk.title for chunk in app.dictionaries.chunks" class="form-control"></select>
</div>
</div>
</div>
<div class="row">
<div class="col-7">
<div class="form-horizontal">
<div class="form-group">
<div class="col-2 control-label">List</div>
<div class="col-10">
<select ng-change="app.setModeById(app.model.modeId)" ng-model="app.model.modeId" ng-options="mode.id as mode.title for mode in app.dictionaries.modes" class="form-control"></select>
</div>
</div>
</div>
</div>
<div class="col-5 text-right">
Добро пожаловать, <a href="#">Админушка</a>
<button class="btn btn-primary" style="margin-left: 15px;">Выход</button>
</div>
</div>
</div>
</div>
<!-- ADDING DIALOG :: START -->
<div ng-insider-dialog-adding="app.dialogs.adding" insider="app"></div>
<!-- ADDING DIALOG :: END -->
<!-- EDITING DIALOG :: START -->
<div ng-insider-dialog-editing="app.dialogs.editing" insider="app"></div>
<!-- EDITING DIALOG :: END -->
<!-- EDITING MULTIPLE DIALOG :: START -->
<div ng-insider-dialog-editing-multiple="app.dialogs.editingMultiple" insider="app"></div>
<!-- EDITING MULTIPLE DIALOG :: END -->
<!-- TABLE :: START -->
<div>
<table class="table table-hover insider-table">
<thead>
<tr ng-if="app.isFilterMode()" class="active">
<th>
<div class="btn btn-default btn-checkbox">
<label>
<input ng-model="app.model.selectedAll" ng-change="app.toggleSelection()" type="checkbox">
</label>
</div>
</th>
<th ng-repeat="field in app.fields track by field.id">
<label ng-bind-html-unsafe="field.title"></label>
<div ng-repeat="config in field.filter track by config.id" ng-insider-node="config"></div>
</th>
<th></th>
</tr>
</thead>
<tbody ng-hide="app.isPending">
<tr ng-repeat="record in app.records.getArray() track by record.atomId">
<td>
<input type="checkbox" ng-model="record._isSelected" ng-change="app.setSelection(app.getSelection())"/>
</td>
<td ng-repeat="field in app.fields track by field.id">
<div ng-switch="field.isEditable">
<div ng-switch-when="true">
<div ng-if="!app.isCellEditing(record.id, $index)">
<div ng-repeat="config in field.reading track by config.id" ng-insider-node="config"></div>
</div>
<div ng-if="app.isCellEditing(record.id, $index)">
<div ng-repeat="config in field.editing track by config.id" ng-insider-node="config"></div>
</div>
<div ng-show="app.isCellSaving(record.id, $index)">Saving...</div>
<button ng-click="app.toggleCellEditing(record.id, $index)" type="button">Edit</button>
</div>
<div ng-switch-when="false">
<div ng-repeat="config in field.reading track by config.id" ng-insider-node="config"></div>
</div>
</div>
</td>
<td>
<button ng-click="app.toggleFavorite(record.id)" type="button" class="hidden-button">
<span ng-show="app.isFavorite(record.id)" class="favorite glyphicon glyphicon-star"></span>
<span ng-hide="app.isFavorite(record.id)" class="favorite glyphicon glyphicon-star-empty"></span>
</button>
<button ng-click="app.openEditingDialog(record.id)" type="button">Edit record</button>
</td>
</tr>
</tbody>
</table>
<div ng-show="app.isPending">
<p>Loading…</p>
</div>
</div>
<!-- TABLE :: END -->
<div class="container-fluid text-right">
<!-- PAGINATION :: START -->
<div ng-insider-pagination="app.pagination"></div>
<!-- PAGINATION :: END -->
</div>
</div>
</div>
</div>
</div>
</body>
|
Сообщение от Erolast
|
|
Просто не надо все в один компонент пихать.
|
большинство приложений описывается жирным рутовым шаблоном в который подключаются готовые (свои/чужие) компоненты
|
Сообщение от Gozar
|
|
Я пишу спокойно на jsx и мне очень нравится.
|
я выше простой пример разметки привел. Думаю, на реакте его сложно будет описать на чистом jsx
|
Сообщение от Gozar
|
|
Можно поподробней, что там про иммутабельность?
|
насколько я понял и в двух словах, реакт требует копировать объекты/массивы для их быстрого и/или корректного сравнения (пока не понял что именно). Для этого есть либы, такие, как
Immutable.js.