Can I Merge JS and HTML into one file?

packages
1

Some packages are supported for data-binding and UI of Meteor such as Angular and ViewModel.
After studying ViewModel, I found that JS event functions can be embedded in HTML in the format of lambda function. For example,

< template name=“returnKey” >
< input type=“text” data-bind=“value: message, returnKey: logMessage” / >
< div data-bind=“text: message” ></ div>
< /template>

template.returnKey.viewmodel({
message: ‘Can it be true?’,
logMessage: function() { console.log(this.message()); }
});

They can be merged into one template:

< template name=“returnKey”>
< input type="text"
data-bind=“value: message,
returnKey: {
logMessage: function() {
console.log(this.message);
}
}
”/>
< div data-bind=“text: message”>< /div>
< /template>

So Meteor code canbe more compact.

2

Can I Merge JS and HTML into one file?

There are a few libraries that let you put js and html on the same file (meteor-compile-view is the only one I remember)

They can be merged into one template:

Now that’s very specific to the library you’re using and that pattern is discouraged. It may not be apparent in that simple example but it can get really messy, really fast. Besides, what if instead of console.log(this.message) you wanted console.log(this.formattedMessage()), where would you put the function for formattedMessage?

You can do something close to it with Angular, but again it’s very messy. It can be done by creating a view model with message and then listening for the keyup event, on the event directive function (in the template) check if it’s 13 then print. Please don’t do this.

With meteor-compile-view you can have one .view file with the following:

!html
< template name="returnKey" >
  < input type="text" data-bind="value: message, returnKey: logMessage" / >
  < div data-bind="text: message" ></ div>
< /template>

!js
Template.returnKey.viewmodel({ 
  message: 'Can it be true?', 
  logMessage: function() { console.log(this.message()); } 
});
3

Well, it “can” be done, but the right question is if some1 else prepared it for your requested combination of tools.
For example with React there is JSX to mix it up.
At the moment I am playing with Coffeescript, so when we combine these 2, there is CJSX :smiley:
But I would not advice to start with that if u need to learn meteor way 1st.

And for demonstration, this is my MainLayout.cjsx now when I am testing SSR with flow router.

@MainLayout = React.createClass
  render: ->
    <div>
      <header>
        This is our header
      </header>
      <main>
        <h1>This is main body</h1>
        <TestComponent1 />
        <TestComponent2 />
      </main>
      <footer>
        This is our footer
      </footer>
    </div>
1 Like
4

I did not mean just put .html and .js files in one file. Actually I want to mix template and js in one. So when you define a button its callback function is followed the button definition. It is compact code. You do not need scroll to other place or switch to another file to know the reaction of a button click. And AngularJS is not necessary in Meteor.
5

You would need a 3rd party library to do it and even then it would be up to the library/framework to decide whether or not it supports the style you’re looking for. Again, that pattern is discouraged so I don’t think you’ll find a library that does it.

Think about it, where would you put a function to format the message? (formattedMessage as I mentioned in my previous post)

Another one, what if you needed to execute the same function based on two different triggers? (the user hits the return key or clicks a “Log” button)

6

Looks nice! Can you share your experience with cjsx and Meteor?

7

Honestly I think if you want to mix your JS and HTML in the same code, React is the perfect way to go - it’s designed completely around this principle.

Try this tutorial about using React and Meteor together:
http://tutorial-viewer.meteor.com/tutorial/0/react

(This tutorial will be put on Meteor.com as part of Meteor 1.2 release, but everything works already so you should be able to get all the way through)

8

Well, I just recently moved to coffeescript, but it feels native for me now.
I have been looking on React for long time, but never forced myself to try it.
But for now it worked and felt natural to use CJSX while I tried to test SSR and basic layouts.
There is that CJSX pattern matching in Atom so it is colored well.
But no linter yet I think.

9

React is Java class style that is inconsistence to template style of Meteor. I prefer to template style.

10

Can Meteor Method be applied for function definition?

BTW Can we call Optimistic UI Meteor method as Async Method? It is somewhat similar.

11

Can Meteor Method be applied for function definition?

On ViewModel? You have to define a function that calls the Meteor method and then bind the function to some kind of trigger.

Template.home.viewmodel({
  addPerson: function () {
    Meteor.call('addPerson');
  }
})

<template name="home">
  <input data-bind="returnKey: addPerson">
</template>

Can we call Optimistic UI Meteor method as Async Method?

Meteor methods always run async on the client so yes.

12

Thanks for response. I found CJSX package for Atom really nice and even better than BetterCoffee! What Meteor package do you use for now? Looks https://atmospherejs.com/jhartma/cjsx is the most popular.

13

That one. I did not experimented too much, the basic layout was working for me so…
And that was my 1st React experience.

14

https://atmospherejs.com/hedcet/polymer-ui