blaze-react icon indicating copy to clipboard operation
blaze-react copied to clipboard

Adding template support on top of jsx

Open chompomonim opened this issue 9 years ago • 3 comments

I like initial ideas of components based Blaze2 and what Blaze Components try to do. React may be much better platform to that that Blaze. I understand that fist of all you wanted to make people more easy way of moving they apps into react so you wanted to be as stict with Blaze API as possible. Have you any plans to add components support into sideburns?

I'd like to have code like this:

<template name="Page">
  <div class="page">
   <ul>
   {{#each person in people}}
       <li onClick={{this.clickEvent}}>Hello {{person.name}}</li>
    {{/each}}
   </ul>
  </div>
</template>

class Page extends React.Component {
  mixins: [ReactMeteorData],
  getMeteorData() {
    return {
      people() {
        return People.find();
      }
    }
  },
  clickEvent() {
    console.log('Hello world');
  },
  render() { return Template.Page }
}

Is it possible in any way?

chompomonim avatar Jan 04 '16 21:01 chompomonim

I had this idea to, and we use this logic in the blaze component that all templates are based on, basically one also needs to pass down the component and the context (the data) for the template to work.

Though I have some ideas on simplifying the templates for a React only approach.

But also with Meteor the above strategy of single file code we need to either pick a new file extension or remove a package using one we want, I guess .jsx is the one we want in this case

timbrandin avatar Jan 05 '16 11:01 timbrandin

I think .jsx should work well. Even if we will have to remove jsx package.

BTW, I'm using .cjsx (for CoffeeScript), but it probably would be hard to have support for it :/ Code would look like:

<template name="Page">
  <div class="page">
   <ul>
   {{#each person in people}}
       <li onClick={{this.clickEvent}}>Hello {{person.name}}</li>
   {{/each}}
   </ul>
  </div>
</template>

class Page extends React.Component 
  mixins: [ReactMeteorData]
  getMeteorData: ->
    people: -> People.find()
  clickEvent: ->
    console.log('Hello world');
  render: -> Template.Page

chompomonim avatar Jan 05 '16 12:01 chompomonim

This is the aim for the next release.

timbrandin avatar Jan 28 '16 08:01 timbrandin