Использовать существующий вывод CMS в качестве данных для отдельных файловых компонентов (Vue. js) - PullRequest
Новая
       4

Использовать существующий вывод CMS в качестве данных для отдельных файловых компонентов (Vue. js)

1 голос
/ 05 марта 2020

У меня есть доступ к шаблонам, которые CMS использует для генерации страниц. Эта CMS очень примитивна. Выходные данные представляют собой части HTML.

. Я хочу использовать эти данные в компонентах с одним файлом. Самое главное, эти данные не должны отображаться браузером. Я полагал, что упаковка вывода CMS в тег noscript будет работать. Затем я просто анализирую строку из noscript, чтобы получить HTML.

. Этот метод довольно грязный и не использует возможности шаблонов Vue. js. Мне интересно, есть ли лучший способ?

Шаблон CMS: 

<noscript id="cms-output">
  <!-- HTML generated by CMS -->
</noscript>

Основной JavaScript Файл: 

import Vue from 'vue'
import App from './app.vue'

const cmsOutput = document.getElementById('cms-output')
const parser = new DOMParser()
Vue.prototype.$cms = parser.parseFromString(cmsOutput.innerHTML, 'text/html')

Vue.config.productionTip = false
new Vue({ render: (h) => h(App) }).$mount('#app')

Один компонент файла: 

<template>
  <div v-html="content"></div>
</template>

<script>
export default {
  computed: {
    content: function() {
      const contentElement = this.$cms.querySelector('.content')
      // contentElement manipulations here (working with descendants, CSS classes, etc)
      return contentElement.outerHTML
    }
  }
}
</script>

1 Ответ

1 голос
/ 05 марта 2020

Вы можете использовать DOM-инжектированные HTML (или даже JavaScript строки) в качестве шаблона в SF C, но вам нужно будет включить Vue runtime compiler . Добавьте следующее к vue.config.js: 

module.exports = {
  runtimeCompiler: true
}

Оберните содержимое вашего HTML вывода в x-template: 

<script type="text/x-template" id="cms-output">
  ...
</script>

В вашем SF C, не используйте теги <template></template>. Вместо этого используйте опцию template в вашем компоненте (для этого нужен компилятор времени выполнения): 

<script>
  export default {
    template: '#cms-output'
  }
</script>

Теперь вы можете использовать шаблон так же, как если бы он был определен в SF C , с директивами, синтаксисом усов и т. д. c.

РЕДАКТИРОВАТЬ (на основе отзывов)

В этом нет ничего уникального или сложного, если я правильно понимаю. Используйте обычный компонент / шаблон. Поскольку вывод не готов к использованию в качестве шаблона, тогда нет другого выбора, кроме как его проанализировать. Вы можете загрузить его из AJAX вместо встраивания, как в вашем вопросе, но в любом случае работает. Ваш компонент может выглядеть примерно так: 

export default {
  data() {
    return {
      data1: '',
      data2: '',
      dataN: ''
    }
  },
  created() {
    const contentElement = this.$cms.querySelector('.content');
    const arrayOfData = parseTheContent(contentElement);
    this.data1 = arrayOfData[1];
    this.data2 = arrayOfData[2];
    ...
    this.dataN = arrayOfData[100];
  }
}

И вы будете использовать стандартный шаблон: 

<template>
  <div>
    Some stuff {{ data1 }}.  Some more stuff {{ data2 }}.<br />
    {{ dataN }}
  </div>
</template>
...