I'm trying to just get off the ground with Meteor 1.2.1 and am failing miserably.
I've simply used the code from this question but always receive a blank page. If I remove the Button class, there's no problem with getting the div to appear or text inside it.
I receive no console errors.
My added packages:
twbs:bootstrap 3.3.6
universe:react-bootstrap 0.24.0
react 0.14.3*
Code:
if (Meteor.isClient) {
Meteor.startup(function () {
let App=React.createClass({
render: function () {
return (
<div>
<Button>Default</Button>
</div>
);
}
});
React.render(<App/>, document.getElementById("container"));
});
}
I expect that whatever I'm missing is very simple, but can't narrow it down other then reac-bootstrap being the cause.
Did you require/import the Button component anywhere in your code? Maybe that's what was missing.
In my ignorance, I simply did not follow the universe:react-bootstrap documentation.
As a global
This package additionally export ReactBootstrap as a global, so you
can write inside any .jsx file:
let { Button } = ReactBootstrap;
<Button /> // React component
or
<ReactBootstrap.Button /> // React component
let { Button } = ReactBootstrap;
if (Meteor.isClient) {
Meteor.startup(function () {
let App=React.createClass({
render: function () {
return (
<div>
<Button>Default</Button>
</div>
);
}
});
React.render(<App/>, document.getElementById("container"));
});
}
Related
I want to do css on them the problem is they are inside a function and I do not know how I access them.
for example:
updateUser() {
this.usersService.UpdateUser(this.user.id, this.user)
.subscribe(() => {
alert("Password changed! You are taken to the login page")
this.router.navigate(['login']);
},(e)=> {
this.errors = [];
if (e.error.errors.Password) {
this.errors.push(e.error.errors.Password);
}
}
)
}
Here in the function I want to do css on the alert I have:
alert("Password changed! You are taken to the login page")
also confirm:
deleteUser(id:string,user:User){
if(confirm(`Are you sure you want to delete user ${user.userName}`)){
this.usersService.DeleteUser(id)
.subscribe(
() =>{
this.router.navigate(['login']);
}
)
}
}
Here in the function I want to do css on the confirm I have:
if(confirm(`Are you sure you want to delete user ${user.userName}`)){
It's not possible to style an alert() or confirm().
That's an HTML Code
<div style="position:absolute; width: 200xp; height:50px;background-color:white; border-radius:10p;padding:10px;"><button onclick="TheFunctionAfterConfirm()">Confirm</button>
<button onclick="TheFunctionAfterDisagree()">Disagree</button><div>
An alternate way could be to use a library like sweetalert2 (https://sweetalert2.github.io/#examples).
If there are problems, add an import to your main script.
Lets stay I have a loginbutton.html file with template {{loginButton}}.
<template name="loginButton">
//rest of code
</template>
How could I render this in a react component. I've looked around and found a couple of answers but to be honest I need more guidance bc I'm fairly new to Meteor. Below is a link to a possible answer I found. I just don't know how to implement this or if this is what i'm actually looking for.
https://gist.github.com/emdagon/944472f39b58875045b6
I finally solved the issue. If you're trying to use a blaze template in a react component you have to make sure your meteor app is using "templating" on the client side (and in a package which is what I was using). Afterwards just follow the directions from the link above when creating your component passing the template in as a prop:
Base.components.photoButton = React.createClass({
componentDidMount: function() {
var componentRoot = React.findDOMNode(this);
var parentNode = componentRoot.parentNode;
parentNode.removeChild(componentRoot);
this.view = Blaze.render(this.props.template, parentNode);
},
componentWillUnmount: function() {
// Clean up Blaze view
Blaze.remove(this.view);
},
render: function() {
return (<div/>
)
},
}));
There is a nice atmosphere package blazetoreact.
It's very simple. If you have this Blaze template:
<template name="loginButton">
<!-- rest of code -->
</template>
Then you can use it as React component:
const LoginButton = BlazeToReact('loginButton');
class SomeComponent extends React.Component {
render() {
return (
<div>
<LoginButton />
</div>
);
}
}
Using Meteor 1.2.0.1 and React. My simple app works great but now I needed iron router.
app layout:
client\
app.jsx
lib\
router.jsx
server
views\
home.jsx
layout.jsx
home.jsx:
Home = React.createClass({
render() {
return (
<div>
<h3>Hello World</h3>
<p>from home</p>
</div>
);
}
});
layout.jsx:
Layout = React.createClass({
render() {
return (
<div>
{this.props.children}
</div>
);
}
});
routes.jsx:
Router.route('/', () => {
let page = (
<Layout>
<Home/>
</Layout>
);
React.render(page, document.body);
});
Surely enough, in my app.jsx, works great as it displays to the body of the html but the setup would not work for a multi-page app so this is the need for routes. Inside is:
Meteor.startup(() => {
let app = (
<Layout>
<Home/>
</Layout>
);
React.render(app, document.body);
});
The question is, how to get iron router (routes.jsx) to show the contents?
I would strongly recommend using Flow Router instead of Iron Router. Add Flow Router to your app, then add kadira:react-layout as well. Follow this format and it should work:
FlowRouter.route('/', {
name: 'home',
action() {
ReactLayout.render(Layout, {content: <Home />});
}
});
FlowRouter.route('/login', {
name: 'loginPage',
action() {
ReactLayout.render(Layout, {content: <Login />});
}
});
And your Layout component should look like:
Layout = React.createClass({
render() {
return (
<div>
<Header />
{this.props.content}
</div>
);
}
});
To route to a page that takes a parameter:
FlowRouter.route('/detail/:id', {
name: 'prodDetail',
action() {
ReactLayout.render(Layout, {content: <ProdDetail />});
}
});
And then in your ProdDetail component, you can refer to FlowRouter.getParam('id'). Check out the full FlowRouter documentation.
The solution was to add the ejson package which solved the issue, thanks to Chris. But I can easily follow Flow Router so I'll mark (since I'll be using it) that the answer but for anyone that has this issue, use the ejson package. However then my resolver over time.
I'm trying to use redactor.js to edit in place some divs in meteor;
in the template I have:
<template name="home">
<section class="editable">
</section>
...
</template>
and in the js:
Template.home.events({
"click section.editable": function(event) {
$(event.target).redactor();
},
});
this creates the redactor wysiwyg editor correctly when I click on the section; the problem is that by clicking again, another editor (nested inside the previous one is created); I'm trying without success to limit the execution of redactor() method only if the editor is not there already.
Could you wrap the state in a session variable? Of course, you'd need to set it back again once the redactor was finished (maybe try hooking into a blur event?)
Template.home.events({
"click section.editable": function(event) {
var isEditorActive = Session.get("editorActive", false);
if (!isEditorActive) {
Session.set("editorActive",true);
$(event.target).redactor({
blurCallback: function(e)
{
Session.set("editorActive",false);
this.core.destroy(); // destroy redactor ?
}
});
}
}
});
PREVIOUSLY:
Is there a particular reason you want to use meteor events for this? You could just use redactor.
if (Meteor.isClient) {
Meteor.startup(function() {
$('section.editable').redactor({
focus: false
});
});
}
Ok so I've got my template in its own file named myApp.html. My template code is as follows
<template name="initialInsertion">
<div class="greeting">Hello there, {{first}} {{last}}!</div>
</template>
Now I want to insert this template into the DOM upon clicking a button. I've got my button rendered in the DOM and I have a click event tied to it as follows
Template.chooseWhatToDo.events = {
'click .zaButton':function(){
Meteor.ui.render(function () {
$("body").append(Template.initialInsertion({first: "Alyssa", last: "Hacker"}));
})
}
}
Now obviously the $("body").append part is wrong but returning Template.initialInsertion... doesn't insert that template into the DOM. I've tried putting a partia {{> initialInsertion}}but that just errors out because I dont have first and last set yet... any clues?
Thanks guys
In meteor 1.x
'click .zaButton':function(){
Blaze.renderWithData(Template.someTemplate, {my: "data"}, $("#parrent-node")[0])
}
In meteor 0.8.3
'click .zaButton':function(){
var t = UI.renderWithData(Template.someTemplate, {my: "data"})
UI.insert(t, $(".some-parrent-to-append"))
}
Is first and last going into a Meteor.Collection eventually?
If not, the simplest way I know is to put the data into the session:
Template.chooseWhatToDo.events = {
'click .zaButton' : function () {
Session.set('first', 'Alyssa');
Session.set('last', 'Hacker');
}
}
Then you would define:
Template.initialInsertion.first = function () {
return Session.get('first');
}
Template.initialInsertion.last = function () {
return Session.get('last');
}
Template.initialInsertion.has_name = function () {
return Template.initialInsertion.first() && Template.initialInsertion.last();
}
Finally, adjust your .html template like this:
<template name="initialInsertion">
{{#if has_name}}
<div class="greeting">Hello there, {{first}} {{last}}!</div>
{{/if}}
</template>
This is the exact opposite solution to your question, but it seems like the "Meteor way". (Basically, don't worry about manipulating the DOM yourself, just embrace the sessions, collections and template system.) BTW, I'm still new with Meteor, so if this is not the "Meteor way", someone please let me know :-)
I think you may want to use Meteor.render within your append statement. Also, note that if you are passing data into your Template, then you must wrap Template.initialInsertion in an anonymous function, since that's what Meteor.render expects. I'm doing something similar that seems to be working:
Template.chooseWhatToDo.events = {
'click .zaButton':function(){
$("body").append(Meteor.render(function() {
return Template.initialInsertion({first: "Alyssa", last: "Hacker"})
}));
}
}
Hope this helps!
Many answer here are going to have problems with the new Blaze engine. Here is a pattern that works in Meteor 0.8.0 with Blaze.
//HTML
<body>
{{>mainTemplate}}
</body>
//JS Client Initially
var current = Template.initialTemplate;
var currentDep = new Deps.Dependency;
Template.mainTemplate = function()
{
currentDep.depend();
return current;
};
function setTemplate( newTemplate )
{
current = newTemplate;
currentDep.changed();
};
//Later
setTemplate( Template.someOtherTemplate );
More info in this seccion of Meteor docs