"we releazied we are doing it wrong" #11
Comments
|
I'm having difficulties to see the benefit of using components as well. I'm trying to compare the two, to see the differences. But the demo's in the readme are pretty much just a I'm not saying that this is the way to go, I would implement this demo in a different way for sure, just tried to make them look the same to make my point more clear. Component from readme <template name="hello-component">
<div class="hello-component">
Welcome Message: {{state$message}}
</div>
</template>var component = FlowComponents.define('hello-component', function(props) {
console.log("A component created!");
this.name = props.name;
this.setRandomGreeting();
// change the greeting for every 300 millis
setInterval(this.setRandomGreeting.bind(this), 300);
});
component.prototype.setRandomGreeting = function() {
var greetings = ["awesome", "nice", "cool", "kind"];
var randomGreeting = greetings[Math.floor(greetings.length * Math.random())];
this.set("greeting", randomGreeting)
};
component.state.message = function() {
return this.name + ", you are " + this.get("greeting") + "!";
};<body>
{{> render component="hello-component" name="Arunoda"}}
{{> render component="hello-component" name="Sacha"}}
</body>Template port of hello-component <template name="helloComponent">
<div class="hello-component">
Welcome Message: {{message}}
</div>
</template>Template.helloComponent.onCreated(function() {
console.log("A template created!");
this.name = this.data.name;
this.greeting = new ReactiveVar("awesome");
// change the greeting for every 300 millis
setInterval(setRandomGreeting.bind(this), 300);
});
var setRandomGreeting = function() {
var greetings = ["awesome", "nice", "cool", "kind"];
var randomGreeting = greetings[Math.floor(greetings.length * Math.random())];
this.greeting.set(randomGreeting);
};
Template.helloComponent.helpers({
'message': function() {
var instance = Template.instance();
return instance.name + ", you are " + instance.greeting.get() + "!";
}
});<body>
{{> helloComponent name="Arunoda"}}
{{> helloComponent name="Sacha"}}
</body> |
|
Same idea, just a bit more Meteor style: <template name="helloComponent">
<div class="hello-component">
Welcome Message: hello {{name}}, you are {{greeting}}!
</div>
</template>var greetings = ["awesome", "nice", "cool", "kind"];
Template.helloComponent.onCreated(function() {
var instance = this;
instance.greeting = new ReactiveVar(_.sample(greetings));
// change the greeting for every 300 millis
Meteor.setInterval(function() {
var greet = _.sample(greetings);
instance.greeting.set(greet);
}, 300);
});
Template.helloComponent.helpers({
'greeting': function() {
var instance = Template.instance();
return instance.greeting.get();
}
});<body>
{{> helloComponent name="Arunoda"}}
{{> helloComponent name="Sacha"}}
</body>To be clear, I'm not trying to be negative about |
|
+1 |
Please specify, what exactly is wrong with the old approach. The motivation behind
flow-componentswould be easier to grasp :)The text was updated successfully, but these errors were encountered: