JSFiddle - React, Tailwind, and code Playground

by nyothecat

HTML

<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<div data-role="content">
    <div id="menu">
        <ul id="menu" data-role="listview" class="ui-listview " data-bind="foreach: menu">
            <li> <a data-bind="text:name, attr: {href: urlmenu}"></a>
 <a href="#" data-bind="{ click: $parent.remove }" data-role="button" data-icon="delete"></a>

            </li>
        </ul>
    </div>
</div>
<div data-role="footer" data-position="fixed">
    <div data-role="navbar">
        <ul id="footer">
            <li><a href="#home" data-icon="home">Home</a>
            </li>
            <li><a href="#Asignaturas" data-icon="grid">Asignaturas</a>
            </li>
            <li><a href="#bandejaentrada" data-icon="mail">Mensajes</a>
            </li>
        </ul>
    </div>
</div>

JavaScript

$(document).on("pagebeforechange", function (e, data) {
    var toPage = data.toPage[0].id;

    if (toPage == "home") {
        ko.cleanNode(document.getElementById('menu'));
        menu();
    }
});

$("#footer a").on("click", function () {
    menuviewModel.menu.removeAll(); //clear menu
    //add whatever menu item you need
    menuviewModel.menu.push(new EditMenuViewModel("New Menu1 " + (new Date()).getTime()));
    menuviewModel.menu.push(new EditMenuViewModel("New Menu2 " + (new Date()).getTime()));
});

function menuViewModel() {
    var self = this;
    self.menu = ko.observableArray([]);
    self.menu.removeAll();
    self.menu = ko.observableArray([
    new EditMenuViewModel("Perfil"),
    new EditMenuViewModel("Asignaturas")]);
}

function EditMenuViewModel(name) {
    this.name = ko.observable(name);
    this.urlmenu = ko.observable("#" + name);
};

var menuviewModel = new menuViewModel();
ko.applyBindings(menuviewModel, document.getElementById('menu'));