How to reinitialize page after it's html content has been completely rewritten?

Let say I have this basic structure

<div class="app-page" data-page="home">
  <div class="app-topbar">
    <div class="app-title">Home</div>
  </div>

  <div class="app-content">
    <div class="app-section">
      <div class="app-button" data-target="page2">Go to Page 2</div>
    </div>
  </div>
</div>

<div class="app-page" data-page="page2">
  <div class="app-topbar">
    <div class="app-button left" data-back data-autotitle></div>
    <div class="app-title">Page 2</div>
  </div>

  <div class="app-content">
    Page 2 is lonely
  </div>
</div>

When I replace html content of <div class="app-page" data-page="page2"> with the following code, back button stops working.

App.controller('page2', function(page) {
  $(page).html('...HTML CONTENT SEE BELOW...');
});

HTML:

  <div class="app-topbar">
    <div class="app-button left" data-back data-autotitle></div>
    <div class="app-title">Page 3</div>
  </div>

  <div class="app-content">
    Page 3 is lonely
  </div>

Before this, anything added to the DOM with the.app-button class, would not have events attached to it. A lot of users have reported this issue, but no fix was available.

I isolated the event attachment code, monitor when new elements are added with the right class, and run the function on those as well. All the while making sure events are not attached twice.

Hope this helps anyone :)

Hello, so i am trying to implement an easter egg like the one in foursquare app as in if you scroll enought you can see an image.

related pic of my super (first) awesome app:

Hi there,

I have a button on my topbar defined like this:

<div class="app-button menu-button left"></div>

My problem is that when I go the page containing that button then get automatically the title of the previous page.

I know there's some functionality like this for the Back Button but I don't want to use it in that button and I think that maybe is a bug.

Thanks! :+1:

Hi there,

My app worked perfectly on the desktop but when I went to use it in the Kik browser the pop-up keyboard would cover the input fields I was selecting.

Is this a known bug? Is there a fix you could point to?

Apologies if this is the wrong place to air this issue but I can't get kik.browser.setOrientationLock('portrait'); to work because kik.browser is showing up as undefined. I can see the function in the minified kik.js but I can't tell what object it should be working upon.

Hello Jairaj,

App.js websites still do not work well outside of the Kik browser due to the fact that scrolling takes place within the page's content element. By fixing the body height, the iOS 7 browser cannot hide its chrome while the user scrolls down the document.

Do you have any plans on fixing this?

Earl

Hello,

We're currently developing an app using App.js structure. It's halfway done and we just noticed the update but couldn't find what's new on this version. Will there be a document with that?

Thanks.

hey, I am trying to populate a UL element by cloning a LI element template. after doing so - stuff like the styling for when tapping on an item and the fast click binding becomes missing on the populated list items.

html:

<div class="app-page" data-page="menu">
      <div class="app-topbar">
        <div class="app-button left" data-back data-autotitle></div>
        <div class="app-title">Menu</div>
      </div>
      <div class="app-content">
        <div class="app-section">
            <ul class="app-list">
                <label>Menu</label>
                    <li class='app-button' data-target='allItems'>Hot Drinks</li>
            </ul>
        </div>
      </div>
    </div>

JS:

function menuController(page){
    var self = this;
    api.getStoreMenu(1,123).done(function(data){
        self.render(data, page);
    });
    $(page).find('li.app-button').on('click', function(){
        var i = $(this).data('section-index');
        App.load('allItems', {sectionIndex:i});
    });

}

menuController.prototype.render = function(menu, page){
    var $content = $(page).find('div.app-content');
    var $template = $content.find('li.app-button');
    var $ul = $(page).find('ul');
    menu.forEach(function(cat, i){
        var catName = cat.category_name;
        var $li = $template.clone(true).text(catName).
            attr('data-section-index', i).appendTo($ul);
            //attr('data-target-args', '{sectionIndex: "'+i+'"}').appendTo($ul);
    });
    $template.remove();
}

thanks

Hello, First off, thanks for adding infinite scrolling to app.js. :-) It would be nice if the callback for infinite scrolling accepted an array of jquery (and zepto) nodes as well. Passing an array of jquery nodes currently throws a TypeError.

Earl

This isn't a bug per se, but it's something that is worth documenting since the behaviour is not obvious.

I have a button in the navigation bar that is defined by the following code:

With a click handler setup as follows:

App.populator('feed', function(page) { ... $(page).find('.app-button.profile_icon').on('click', function() { // executes once only (see explanation below) } }

I arrive at this page from an earlier page, and did not want the app-button treated as a back button. It therefore seemed logical (and perhaps redundant) to set data-back="false". However, setting data-back="false" causes the click handler to be cleared after the first click. The 'active' class is also not removed from the element after the first click.

libpng-1.5.13-8.el7.x86_64 lrwxrwxrwx 1 root root 19 Oct 13 15:52 /usr/lib64/libpng15.so.15 -> libpng15.so.15.13.0 -rwxr-xr-x 1 root root 179328 Oct 13 15:52 /usr/lib64/libpng15.so.15.13.0 drwxr-xr-x 2 root root 0 Oct 13 15:52 /usr/share/doc/libpng-1.5.13 -rw-r--r-- 1 root root 192660 Sep 27 2012 /usr/share/doc/libpng-1.5.13/CHANGES -rw-r--r-- 1 root root 4205 Sep 27 2012 /usr/share/doc/libpng-1.5.13/LICENSE -rw-r--r-- 1 root root 10418 Sep 27 2012 /usr/share/doc/libpng-1.5.13/README -rw-r--r-- 1 root root 1120 Aug 27 2010 /usr/share/doc/libpng-1.5.13/TODO -rw-r--r-- 1 root root 31690 Sep 27 2012 /usr/share/doc/libpng-1.5.13/example.c -rw-r--r-- 1 root root 195566 Sep 27 2012 /usr/share/doc/libpng-1.5.13/libpng-manual.txt -rw-r--r-- 1 root root 1146 Oct 13 15:52 /usr/share/man/man5/png.5.gz

hi, I use app.js app.min.css for developing the ui. I inserted a