@dvlwjoffice

its work, but i still doesn’t understand about that page.data.nama can you explain it for me? thanks

I mentioned it before:

The data object will be available as a property of the page element. In the init event, for example, you can check event.target.data and use it to set up the content.

Therefore, event.target.data.nama is the value you are passing. Or var page = event.target; page.data.nama.

For the other question, in your app you are doing this:

 $.each(result[0], function(index, el){
   var nama = el.nama;

   // ...   
   // on item click:
   document.querySelector('#coreNavigator').pushPage('harga.html', {data: {ID: 'id',nama: 'nama'}});

This is the data object you are passing:

  data: {
    ID: 'id',
    nama: 'nama'
  }

In JavaScript, the right parts of that object declaration are the values, and the left parts are the keys that you will use later on to access the values. However, here your values are strings, not variables. Every pushed page will get page.data.ID with value 'id' and page.data.nama with value 'nama'. I believe you want to pass a dynamic value, not just a static string. You had a nama variable in the code wrote before, so I’m guessing you want to pass that variable’s content to pages instead, so just remove the quotes:

  data: {
    ID: 'id',
    nama: nama
  }

@Ahmed-Elshorbagy You don’t need to wait unttil the document is ready to set a listener. Add a console.log or anything there to make sure the init handler is running so we know if the problem is in your app or in the infinite scroll feature side.

@yeastwrangler The back button is just popping 1 page from its parent navigator’s page stack. The splitter should be modifying the same page stack.

@dvlwjoffice said:

{data: {ID: ‘id’,nama: ‘nama’}}

You are passing strings there, not variables.

page.querySelector(‘ons-toolbar .center’).innerHTML = nama;

That nama variable does not exist in that scope. Perhaps you mean page.data.nama?

@dvlwjoffice Hi! A few things I’d change:

1. ons.ready(callback) waits for “DOMContentLoaded”, for Cordva’s “deviceready” and for some internal setup in Onsen UI, so it is probably better than $(document).ready.

2. You are loading data after the Ajax request is done, but you cannot ensure that #datalist is there at that moment because <ons-splitter-content page="..."> is loading the page asynchronously as well. Perhaps you can consider checking page’s lifecycle events to make sure #home is attached.

3. For versions >= 2.4.0, <template> is a better option than <ons-template> since it is native.

About your questions, I don’t see how are you trying to change the toolbar title, but the right way is to use page’s lifecycle events again. Specifically, the init event:

document.addEventListener('init', function(event) {
  var page = event.target;
  if (page.matches('#home') {
    page.querySelector('ons-toolbar .center').innerHTML = '...';
  }
});

For passing information, pushPage methods accepts a second parameter options which can contain options.data object:

myNavigator.pushPage('page.html', { data: { customID: '...' } });

The data object will be available as a property of the page element. In the init event, for example, you can check event.target.data and use it to set up the content.

Hope it helps!

@wetfeet Font Awesome dependency was removed in 2.4.0 and the other 2 icon pack dependencies will be removed in 2.5.0. The core uses SVG images instead of icons so you can freely remove the packs you don’t need

@mjessen If you use Vue CLI template (OnsenUI/vue-cordova-webpack) instead, you’ll be able to run npm run build:watch. This automatically generates files in www and lets Monaca Debugger fetch the new changes.

vue init OnsenUI/vue-cordova-webpack projectName

@Mod-Template The best way is to generate your own theme. When you install Onsen UI you’ll get a folder css-components-src like this. Just follow the readme info and then use the generated CSS file in your project.

@raphox cordova.js is generated by Cordova when you create your app (www/cordova.js). You won’t have that file in the browser. If you need to test the device back button, ESC key should fire a fake back button event in the browser

@denious Hi! I think it shouldn’t have worked before 2.0.2 either. The @click handler is using Vue component events, not DOM native events. v-ons-col is not a clickable component so it should not implement a “click” component event. You can, however, listen to DOM events with @click.native="..." and this will always work (v-on “native” modifier).

The reason why it works with ons-col (instead of v-ons-col) is that it is an actual DOM element so @click directly uses the DOM event.