Формы редактирования

В зависимости от типа данных поля в базе данных, формируется HTML шаблон для редактирования этого поля. Так, например, если у поля тип дата - то соответствующим шаблоном будет выпадающий календарь.

Для удобства использования система предлагает 2 шаблона для редактирования модели и ссылок с ней связанных

Редактирование модели

шаблон small_form_with_header пример из модуля documenteditor:

Вызов из кода:

<!-- ko template:{
    name:'small_form_with_header',
    data:{Name:'Основные параметры',Fields:MDocumentEditor.DocFields, Model:Document}
} --><!-- /ko -->

Код шаблона:

<script id="small_form_with_header" type="text/html">
    <div>
    <!-- ko if:$data.Name && $data.Name.length -->
    <h3 class="row header smaller lighter blue" data-bind='lang:$data.Name'></h3>
    <!-- /ko -->
    <!-- ko with:$data.Model -->
    <div class="profile-user-info profile-user-info-striped"  style='margin-bottom: 3px;position: relative;'>
        <!-- ko if:console.log($parent) --><!-- /ko -->
        <!-- ko if:$parent.Remove -->
        <div class="profile-info-toolbuttons pull-right action-buttons noselect">
            <a class="white" data-bind="title:'Удалить',click:$parent.Remove">
                <span><i class="fa fa-icon fa-times bigger-130"></i></span>
            </a>
        </div>    
        <!-- /ko -->
        <!-- ko foreach: $parent.Fields  -->
        <div class="profile-info-row">
            <div class="profile-info-name" data-bind="model:$parent.modelname,lang:$data"></div>
            <div class="profile-info-value">
                <!-- ko template: $parent.Template($data) --><!-- /ko -->
            </div>
        </div>  
        <!-- /ko -->
    </div>
    <!-- /ko -->
    </div>
</script>

Вид для пользователя:

Редактирование ссылок

Шаблон edit_links пример из модуля documenteditor:

Вызов из кода

<!-- ko template:{
    name:'edit_links',
    data:{Name:'Выбор заголовков', MainModel:'doc', LinkModel:'docheader', Model:Document}
} --><!-- /ko -->

Код шаблона

<script id="edit_links" type="text/html">
    <div class="dd" > 
    <!-- ko if:$data.Name && $data.Name.length -->
    <h3 class="row header smaller lighter blue" data-bind='lang:$data.Name'></h3>
    <!-- /ko -->
    <!-- ko with:$data.Model -->
        <!-- ko if:!$data['Link_'+$parent.LinkModel]().length -->
            <div class='emptyLinks'>Ссылок - нет</div>
        <!-- /ko -->
        <ol class="dd-list" data-bind="foreach:$data['Link_'+$parent.LinkModel]">
            <li class="dd-item" data-bind="attr:{'data-id':$index()}">
                <div class="profile-user-info profile-user-info-striped " style='margin-bottom: 3px;'>
                    <div class='profile-info-toolbuttons pull-right action-buttons noselect'>
                        <a class='white' data-bind="title:'Удалить',click:ModelEdit.RemoveLink.bind($parent,$parents[1].LinkModel,$data)">
                            <span ><i class="fa fa-icon fa-times bigger-130" ></i></span>
                        </a>
                        <a class='white' data-bind="title:'Изменить',click:$data.IsEdit.bind(null,!$data.IsEdit())">
                            <span ><i class="fa fa-icon fa-pencil bigger-130" ></i></span>
                        </a>
                    </div>
                    <!-- ko foreach: LinkEditorHelper.FilterEditFields($parents[1].MainModel,$parents[1].LinkModel,$parents[1].FieldParams)  -->
                        <div class="profile-info-row" data-bind="css:{'not-edited':!$parent.IsEdit()}">
                            <div class="profile-info-name" data-bind="model:$parent.modelname,lang:$data"></div>
                            <div class="profile-info-value">
                                <!-- ko if:$parent.IsEdit() -->
                                    <!-- ko template: $parent.Template($data) --><!-- /ko -->
                                <!-- /ko -->
                                <!-- ko ifnot:$parent.IsEdit() -->
                                    <!-- ko if:$parent.Types[$data].Type=='Boolean' -->
                                    <div class="checkbox">
                                        <input class="ace ace-checkbox" type="checkbox" disabled  data-bind="checked: $parent[$data]">
                                        <span class="lbl"></span>
                                    </div>
                                    <!-- /ko -->
                                    <!-- ko ifnot:$parent.Types[$data].Type=='Boolean' || $parent.Types[$data].Type=="Select" -->
                                        <span data-bind='text:$parent[$data]'></span>
                                    <!-- /ko -->                                    

                                    <!-- ko if:$parent.Types[$data].Type=="Select"  -->
                                        <!-- ko template:{name:'catalogue_withcode',data:{model:$parent.Types[$data].Model,id:$parent[$data]()}} --><!-- /ko -->
                                    <!-- /ko -->                                    
                                <!-- /ko -->
                            </div> 
                        </div>  
                    <!-- /ko -->
                </div>
            </li>
        </ol>
        <a class='addLinkModel' data-bind="click:ModelEdit.AddLink.bind($parent.Model,$parent.LinkModel)">Добавить ссылку</a>
    <!-- /ko -->
    </div>  
</script>

Вид для пользователя

В большинстве случаев этих двух шаблонов должно хватать для составления форм редактирования. В крайнем случае ничто не мешает сделать произвольную форму на основе информации о полях модели и шаблонов их редактирования (см разделМодели)