Posts made by patrick

@sherscher it looks like a bug, however I cannot really reproduce it. Can you maybe change this example ( http://tutorial.onsen.io/?framework=react&category=Reference&module=input) to some example that can be reproduced and export it to CodePan. Since this is probably a bug, it would be good to make an issue on Github

@giov you can set the id of the page you want to color:

<ons-page id='mypage'> ... </ons-page>

and then use the selector in css

#mypage .page__background { background-color: green}

Here is a codepen example: https://codepen.io/philolo1/pen/xOPYpV

Hi @JesperWe
If you use classes the functions are not bind. There are a couple of options on what you can do, the first option binding the function to the class in the constructor. This is necessary for classes:

export class Result extends Component {
  constructor(props) {
    super(props);
    this. handleClick = this. handleClick.bind(this);
  }

  handleClick() {
   ons.notification.alert( this.props.result._id );
  }

 render() {
     return (  <Col onClick={this.handleClick}>{this.props.result.text}</Col> );
    }
}

The second option is to use React.createClass, this bind it automatically:

const Result = React.createClass({
 handleClick: function() {
   ons.notification.alert( this.props.result._id );
 },
 render: function() {
   return (
      <Col 
        onClick={this.handleClick}
      >{this.props.result.text}
      </Col>
   );
 }
}
export Result

@PetrMyazin said:

I think you do not need to make timer variable in TimerStore class as observable. Could you please check?

reply

Yes, you are correct, the fact that the inner variables are observable is enough.

In recent posts we spoke a lot about developing React applications with Redux: It enables the users to easily make testable and structured applications. However, writing a Redux application produces a lot of boilerplate code. One framework alternative is MobX, which solves this problem by doing automation using observables.

Click here to see the original article

One of the great things about React is that there are a lot of tools and libraries available. One of the most popular is the React Hot Reloader by Dan Abramov, who also created Redux. The React Hot Reloader enables developers to make code changes and apply these changes without the application losing its state. In this tutorial we will build a small application step by step to demonstrate the power of Webpack and React and also show how OnsenUI users can benefit from it.

Click here to see the original article

With Cordova it is easy to build functional hybrid apps for all the major mobile platforms, including Android, iOS and Windows Phone. However, making the apps look good is a much harder task. Luckily, with the help of the Monaca CLI and React Components for Onsen UI this became much easier. In this blog post we are going to look at some benefits of using these technologies.

Click here to see the original article

@wenbolovesnz said:

Thank you for this post. However, it would be very appreciated if you could write up a post about how Navigator should work when we have to handle user email password login or Oauth login ?

reply

You can use resetPage: https://onsen.io/v2/docs/react/Navigator.html. We are planing on writing more posts about react soon.

React Native uses internally the native components, while OnsenUI with Monaca uses the Webview and Phonegap and Cordova. I believe for most applications there is no big distinction in performance between an hybrid app or an native app, but the user experience might be different. Its quite a big topic to open here on the Forum and both native apps and hybrid apps have its pro’s and con’s.

There are many frameworks and concepts around in the JavaScript world. In today’s blog post we are going to write a pure mobile JavaScript application with Onsen UI and Redux, which is a very small but powerful library that enables to write JavaScript applications in a conceptually different way.

Click here to see the original article

@sk sry to keep you waiting, your solutions seems to be fine. My blogpost will be only about redux with vanilla js. If you encounter any problems, feel free to report it on github or ask a question in our community.

@mateusjatenee could you be more specific what your issue is. In general Ajax calls should work. Do they work in your browser? You can have a look at the onsen ui tutorials how one can do it: https://onsen.io/blog/tags/tutorial.html, but you need to be more specific in order to help you.

In this tutorial we are going to learn how to use the Foursquare API and Google Static Maps API to create a Places App with Onsen UI and AngularJS. In this app we will be able to search for a particular place and filter the results by food, shops and outdoor places. There will be also an integrated static map which will lead to the Google Website once clicked.

Click here to see the original article

Did you have a look at https://onsen.io/guide/overview.html#HandlingBackButton?

You are using the reference of onsen1.0 not onsen2.0, please have a look at this url: https://onsen.io/2/index.html

<ons-list>
   <ons-list-item>
       <label class="checkbox--noborder">
       <input type="checkbox" class="checkbox__input checkbox--noborder__input">
           <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
         OFF
       </label>
    </ons-list-item>
<ons-list-item>
  <label class="checkbox--noborder">
    <input type="checkbox" class="checkbox__input checkbox--noborder__input" checked="checked">
      <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
      ON
  </label>
</ons-list-item>
<ons-list-item>
  <label class="checkbox--noborder">
    <input type="checkbox" class="checkbox__input checkbox--noborder__input" disabled checked="checked">
    <div class="checkbox__checkmark checkbox--noborder__checkmark"></div>
      Disabled
    </label>
  </ons-list-item>
</ons-list>

I also did a Codepen-Link: http://codepen.io/anon/pen/eJKXYX

Hi,
You can start by cloning the Quickstart example https://github.com/OnsenUI/onsenui2-quickstart. Ones you have downloaded the files, you should be able to play with it offline.