Question

我有一个Windows应用程序的应用程序，在一个页面中我动态添加内容，当我导航到下一页并返回时，动态内容消失。

如何保留页面中的动态内容？

Resumen.js：

WinJS.UI.Pages.define('/pages/Resumen/Resumen.html', {
    ready: function () {
        //Evento agregar nueva tarea
        document.querySelector('#agregar-tarea').addEventListener('click', irTarea, false);

        if (!LBR.registros_nuevos.es_primer_tarea) {
            agregarTarea();
        }
    }
});

function irTarea() {
    WinJS.Navigation.navigate('../pages/Tarea/Tarea.html');
}

function agregarTarea() {
    var reg = LBR.registros_nuevos,
        lista = document.getElementById('tareas-agregadas'),
        li = document.createElement('li');

    document.getElementById('resumen').className = '';

    li.innerHTML = '<div><h1>' + reg.tarea.descripcion + '</h1><p>' + reg.tarea.id + '</p></div>';
    li.innerHTML += '<div><h1>' + reg.articulo.descripcion + '</h1></p>' + reg.articulo.id + '</p></div>';
    li.innerHTML += '<div>' + reg.articulo.cantidad + '</div>';
    lista.appendChild(li);
}

Tarea.js：

WinJS.UI.Pages.define('/pages/Tarea/Tarea.html', {
    ready: function () {
        //Mostrar el boton 'Atras'
        document.getElementById('atras').className = '';
        //Eventos de los buscadores
        document.getElementById('tarea-buscar').onkeyup = buscarTarea;
        document.getElementById('articulo-buscar').onkeyup = buscarArticulo;
        //Evento botón agregar
        document.getElementById('agregar').onclick = agregarTarea;
        //Evento botón atrás
        document.getElementById('atras').addEventListener('click', irAtras, false);
    }
});
function agregarTarea() {
    var tarea = {
        tarea: document.getElementById('tarea-seleccionada').getElementsByTagName('p')[0].innerText,
        item: document.getElementById('articulo-seleccionado').getElementsByTagName('p')[0].innerText,
        cantidad: parseFloat(document.getElementById('cantidad').value),
        item_udm: 'GL',
        mod_usr: 'jjlopez'
    },
        reg = LBR.registros_nuevos;

    reg.tarea.id = document.getElementById('tarea-seleccionada').getElementsByTagName('p')[0].innerText;
    reg.tarea.descripcion = document.getElementById('tarea-seleccionada').getElementsByTagName('h1')[0].innerText;
    reg.articulo.id = document.getElementById('articulo-seleccionado').getElementsByTagName('p')[0].innerText;
    reg.articulo.descripcion = document.getElementById('articulo-seleccionado').getElementsByTagName('h1')[0].innerText;
    reg.articulo.cantidad = parseFloat(document.getElementById('cantidad').value);

    if (reg.es_primer_tarea) {
        reg.agregados[reg.indice_registros] = {
            nodriza: reg.nodriza,
            equipo: reg.equipo.id,
            odometro: 0,
            odometro_udm: 'KM',
            observaciones: 'Ninguna',
            creado_usr: reg.usuario.creado,
            mod_usr: reg.usuario.mod,
            fecha_apunte: new Date().getTime(),
            tareas: []
        }
    }
    reg.agregados[reg.indice_registros].tareas[reg.indice_tareas] = tarea;
    reg.es_primer_tarea = false;
    WinJS.Navigation.navigate('../pages/Resumen/Resumen.html');
}

Answer 1

＆＃34;页面导航＆＃34;在WinJS中是一个DOM替换机制，在PageControlNavigator元素（通常在default.html中定义）中的任何内容都会被每个导航完全替换。因此，当您导航时，动态添加到一个页面的任何内容都将从DOM中转储出来，并且当您导航回来时，您必须再次将其恢复。

围绕这个的一个策略是根本不进行真正的导航，而只是在向前导航时隐藏新页面后面的新页面，以便向后导航只隐藏或删除第二页，以便第一页再次可见。 / p>

或者，要在跨导航时保留DOM块，当您切换离开页面时，您需要暂时从PageControlNavigator中移出该内容的根div，然后在重新使用它时你导航回来了。

您可以使用以下内容构建通用/自动机制：

在default.html中有一个隐藏的div，称之为＆＃34; Holder1＆＃34; （如果跨多个页面需要这种行为，你可以有多个这样的持有者。）
在Resumen.html中设置div，您可以在其中创建动态内容，并使用数据持有者=＆＃34; Holder1＆＃34;
修改navigator.js（在您的项目中），以便_navigating函数检查正在导航的页面中的DOM，以查找具有数据持有者属性的任何元素，并将其子项重新置于指定的holder元素（属性值）。同时，在default.html中向此holder添加一个data-target属性，以包含包含这些子元素的page元素的id。
同样，在_navigating或_navigated中，检查您导航到的页面是否具有带数据持有者属性的空元素。如果是这样，那么在default.html中获取该holder元素的子元素，并在加载后将内容重新父级转换为新页面。（这是您需要多页的独特持有者。）

如何保留页面中的动态内容？

1 个答案: