Creating template #9

kakoni · 2018-09-17T08:40:33Z

Interesting project but I seem to have difficulties to understand how to work with templates.
I have a simple html;

<html>
  <head>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/vendor/vue.js"></script>
    <script src="js/vendor/quench-vue.js"></script>
  </head>
  <body>
    <div id="app">
      <div q-component="card">
        <h3 v-text="props.title">Card</h3>
      </div>
    </div>
  </body>
  <script src="js/card.js"></script>
</html>

And js/card.js says

var appEl = document.getElementById('app');
var data = quenchVue.createAppData(appEl);

var components = {
  'card': {
    props: ['title'],
    template: 'local'
  }
}

components = quenchVue.createComponentTemplates(app, components);
var template = quenchVue.createAppTemplate(appEl);

var app = new Vue({
  el: appEl,
  components: components,
  data: data,
  template: template,
});

But this won't work its giving Uncaught TypeError: Cannot read property 'querySelector' of undefined error. So obviously I'm doing something wrong.

The text was updated successfully, but these errors were encountered:

kakoni · 2018-09-17T08:55:51Z

Or if I do components = quenchVue.createComponentTemplates(appEl, components); instead then the above leads to
TypeError: Cannot read property 'title' of undefinederror

stowball · 2018-09-17T09:47:54Z

Thanks, you found a typo in my docs (it should have been appEl).

Your new issue is that your component only accepts a prop called title, but you're trying to reference it with props.title.

Now, apparently my docs also lie because fixing that will result in the following error:

Property or method "title" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

It seems local component templates have to be removed from the app template before Vue gets to it by wrapping them in  …  comments, which means that you also have to populate the data for any pre-rendered components.

Here's a working example:

<div id="app">
  <!-- <q> -->
  <div q-component="card">
    <h3 v-text="title">Card</h3>
  </div>
  <!-- </q> -->
  <card v-bind:title="'fooCard'"></card>
</div>
<script>
var appEl = document.getElementById('app');
var data = quenchVue.createAppData(appEl);

var components = {
  'card': {
    props: ['title'],
    template: 'local'
  }
}

components = quenchVue.createComponentTemplates(appEl, components);
var template = quenchVue.createAppTemplate(appEl);

var app = new Vue({
  el: appEl,
  components: components,
  data: data,
  template: template,
});

stowball · 2018-09-17T10:23:23Z

This would be a simple fix if I added support for q-text and q-html instead of the v- equivalent in components.

Then the following:

<div id="app" q-data='{
  "cards": [
    { "title": "TITLE 1", "html": "<b>bold</b>" },
    { "title": "TITLE 2", "html": "<i>italic</i>" }
  ]}'>
  <div q-component="card">
    <h3 q-text="title">A pre-rendered Card</h3>
    <p q-html="html">With some <code>html</code> content</p>
  </div>

  <hr />
  <p>Now we can do an infinite scroll and fetch extra cards</p>
  <hr />

  <card
    v-bind:html="card.html"
    v-bind:title="card.title"
    v-for="card in cards"
  ></card>
</div>

<script>
var appEl = document.getElementById('app');
var data = quenchVue.createAppData(appEl);

var components = {
  'card': {
    props: ['html', 'title'],
    template: 'local'
  }
}

components = quenchVue.createComponentTemplates(appEl, components);
var template = quenchVue.createAppTemplate(appEl);

var app = new Vue({
  el: appEl,
  components: components,
  data: data,
  template: template,
});
</script>

would render as:

kakoni · 2018-09-17T11:14:57Z

Aah, thanks.

Perhaps more about my usecase;
I've got sender rendered data coming in as html

<ul>
 <li><span id="a">data</span><span id="b">more data</span></li>
 <li><span id="a">even more data</span><span id="b">and even more data</span></li>
...
</ul>

I'd like to turn this li list into card components + programatically add some extra control to this

var components = {
  'card': {
    props: ['title'],
    template: 'local',
    created: function() { ... doing something ... }
  }
}

stowball · 2018-09-17T11:35:54Z

So you have raw pre-rendered html? Can you transform this html? What do you want to do it with it exactly?

kakoni · 2018-09-17T13:02:34Z

So running legacy backend that does raw prerendered html (has some limited templating possibilities). I guess I could even do

<card>
  <row id="a">Data</row>
  <row id="b">Datamore data<row>
</card>

type of output.

I'd like to hydrate(I believe is the term) this into dynamic vue component.
With the components I want to do computed properties + event handling.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Creating template #9

Creating template #9

kakoni commented Sep 17, 2018

kakoni commented Sep 17, 2018

stowball commented Sep 17, 2018

stowball commented Sep 17, 2018

kakoni commented Sep 17, 2018

stowball commented Sep 17, 2018

kakoni commented Sep 17, 2018 •

edited

Loading

Creating template #9

Creating template #9

Comments

kakoni commented Sep 17, 2018

kakoni commented Sep 17, 2018

stowball commented Sep 17, 2018

stowball commented Sep 17, 2018

kakoni commented Sep 17, 2018

stowball commented Sep 17, 2018

kakoni commented Sep 17, 2018 • edited Loading

kakoni commented Sep 17, 2018 •

edited

Loading