Как использовать дочерние теги <template>на вызов директивы / компонента для создания динамических шаблонов? - PullRequest
Новая
       34

Как использовать дочерние теги <template>на вызов директивы / компонента для создания динамических шаблонов?

0 голосов
/ 16 октября 2018

Я пытаюсь перенести директиву AngularJS на VueJS, но мне не удалось взломать этот конкретный орех ...

Проще говоря, у меня есть "универсальная" директива списка.Под каждым вызовом директивы есть тег <template>, который определяет способ визуализации tbody.В AngularJS я смог сделать это, заменив DOM tbody[target='true'] в #myDirectiveBaseTemplate содержимым my-directive > template за вызов <my-directive> (плюс небольшой сервисный мажик $compile, смешанный, чтобы сделать его готовым к работе)-go).

VueJS, похоже, не дает мне доступ к этой низкоуровневой функциональности, или когда он (своего рода сортировка) не дает мне ссылку на текущий _element, поэтому яне иметь доступа к тегу <template> каждого вызова.

Упрощенный код директивы AngularJS определен примерно так: 

<my-directive data="some.list" mapping="[ 'property', 'property2' ]">
    <template>
        <tbody>
            <tr ng-repeat="item in data">
                <td>{{item.property}}</td>
                <td>{{item.property2}}</td>
            </tr>
        </tbody>
    </template>
</my-directive>

myDirective сначала извлекает базу text/ng-template,что выглядит примерно так: 

<script type="text/ng-template" id="myDirectiveBaseTemplate">
    <table>
        <thead>
            <tr ng-repeat="prop in mapping" ng-click="doSort(prop)">
                {{prop}}
            </tr>
        </thead>
        <tbody target="true"></tbody>
    </table>
</script>

Во время рендеринга tbody[target='true'] в #myDirectiveBaseTemplate заменяется DOM на каждый вызов my-directive > template, в результате чего создается собственный HTML для каждого вызова my-directeive на основе каждого встроенногоtemplate.

Итак ... как, черт возьми, мне это сделать в VueJs?!?

РЕДАКТИРОВАТЬ 1:

A SecondВызов my-directive может выглядеть следующим образом: 

<my-directive data="some.list" mapping="[ 'order.delivered', 'person.name', 'person.dob' ]">
    <template>
        <tbody>
            <tr ng-repeat="item in data">
                <td>{{item.order.delivered ? 'Delivered' : ''}}</td>
                <td>{{item.person.name}}</td>
                <td>{{item.person.dob | format:'yyyy-mm-dd'}}</td>
            </tr>
        </tbody>
    </template>
</my-directive>

И просто заметьте, пример aboМы были упрощены.my-directive на самом деле может определять до 5 различных <template> с внутри себя для изменения различных частей «общего» списка (например, <template type='row'>, <template type='help'> и т. Д.).Тем не менее, все служат одной цели;изменять / добавлять различные части DOM HTML-кода базовой директивы.

1 Ответ

0 голосов
/ 16 октября 2018

Я не смог понять, есть ли случай, когда ваш <template> собирается создать "пользовательский HTML для каждого вызова my-directive", за исключением показа различных свойств элемента в каждой строке таблицы.Если это только разница между вызовами, то ваши шаблоны компонентов Vue.js могут просто выглядеть так:

Vue.js ChildTbodyComponent.vue Шаблон: 

<tbody>
    <tr v-for="item in items" :key="item.id">
        <td>{{item.property}}</td>
        <td>{{item.property2}}</td>
    </tr>
</tbody>

Vue.js ParentTableComponent.vue Шаблон:

<table>
    <thead>
        <tr v-for="header in headers" :key="header.name" @click="doSort(header)">
            {{header.name}}
        </tr>
    </thead>
    <child-tbody-component :items="arrayOfDataForRows"></child-tbody-component>
</table>
...