Question

我正在从头开始做SPA，到目前为止我已经完成所有工作，除了导航链接上的active状态不会根据用户导航到的位置更新。

有趣的是，当我在Chrome中打开开发者工具时，在“元素”下，DOM仍在原始导航元素上显示active类，但在“控制台”下，当我进行控制时。记录该元素，它表明该类已被删除。

我在一些地方尝试了event.stopPropagation()和jQuery.off()功能，但似乎没有解决这个问题。

问题：单击导航链接时，活动链接和前一个活动链接的类列表不会更新，但console.log函数确实会显示前一个活动链接的更新类列表

所需行为：前一个活动链接会丢失其active类，并且当前活动链接在单击其导航链接并且页面后获得active类呈现新内容（所谓的新页面）。

更新1：根据建议更新了代码，它解决了问题的第一部分。从所有active元素中删除li类现在可以正常工作，但在导航不起作用后，使页面在当前活动链接上呈现带有active类的更新链接。请参阅generateView（）函数下的app.js。

更新2：让它正常工作。请参阅本课题的底部。谢谢！

我的app.js

(function ($, hbs){

'use strict';

// declare some usefull variables to use throughout the app
var
    doc = document,
    oldPath = '',
    newPath = '',
    navParentEl = '';


// 1: Manually trigger a hashchange to start the app.
window.onload = function (e) {
    $(window).trigger('hashchange');
};

// 2: Catch clicks on the root-level element for anchor tag clicks.
doc.body.addEventListener('click', function (e) {
    //e.stopPropagation();
    var tag = e.target;

    // check element clicket
    if (tag.tagName === 'A' && tag.href && e.button === 0) {
        // it's a left-click on an anchor. Lets navigate!
        if (tag.origin === window.location.origin) {
            // prevent the page from navigating

            e.preventDefault();

            // it's a link within the site, HURRAY!
            oldPath = window.location;
            newPath = tag.href,
            navParentEl = tag.parentElement;

            console.log(navParentEl);

            // Update the URL bar! IMPORTANT!
            // @TODO: MOVE INTO A FUNCTION OR OBJECT
            window.history.pushState(null, '', newPath);
            render(window.location.hash, data, e);
        }
    }
});

// register Handlebars partials
hbs.registerPartial({
    'header': hbs.templates.header,
    'footer': hbs.templates.footer
});

$(window).on('hashchange', function (e) {
    // On every hash change the render function is called with the new hash.
    render(window.location.hash, data, e);
});

function render(url, data, evt) {
    var temp = url.split('/')[0];

    // Hide current page
    $('.pages').addClass('hidden');

    // remove anchors .active class
    //$('.nav-parent').removeClass('active');

    var map = {
        '': function (data) {
            renderPage('home', data);
        },
        '#home': function (data) {
            renderPage('home', data);
        },
        '#gallery': function (data) {
            renderPage('gallery', data);
        },
        '#about': function (data) {
            renderPage('about', data);
        }
    };

    if (map[temp]) {
        map[temp](data);
    } else {
        renderErrorPage(data);
    }
}

function renderPage(page, data) {
    var tpl = hbs.templates[page](data);
    generateView(tpl, page);
}

function renderErrorPage(data) {
    renderPage('error', data);
}

function generateView(tpl, page) {
    var pageId = '#' + page;

    $(pageId).removeClass('hidden');
    $('.container').html(tpl);

    // this works for removing the active class from all li elements
    $('.nav-parent').removeClass('active');

    // add .active class to the new active anchor element
    // does not work
    $(navParentEl).addClass('active');

}

})(jQuery, Handlebars);

我的导航HTML：

<div class="header clearfix">
    <nav>
        <ul class="nav nav-pills pull-right">
            <li role="presentation" class="nav-parent active"><a href="#home" class="links">Home</a></li>
            <li role="presentation" class="nav-parent"><a href="#gallery" class="links">Gallery</a></li>
            <li role="presentation" class="nav-parent"><a href="#about" class="links">About</a></li>
            <li role="presentation" class="nav-parent"><a href="#contact" class="links">Contact</a></li>
        </ul>
    </nav>
    <h3 class="text-muted">{{ projectName }}</h3>
</div>

更新2 ：在完成一些提示后让它正常工作。我需要重新考虑我的generateView()功能。这是该函数的最终代码：

function generateView(tpl, page) {
    var pageId = '#' + page;

    // remove hidden class from content to be shown
    $(pageId).removeClass('hidden');
    // add the template to the html
    $('.container').html(tpl);
    // move the active class from the former active link
    $('.nav-parent').removeClass('active');

    // get the current hash of the location
    var newHash = window.location.hash,
        // get all links
        _links = document.querySelectorAll('.links'),
        currentActiveLink = '';

    // iterate over the _links object and find the link with href === newHash
    for ( var i = 0; i < _links.length; i++ ) {
        if ( _links[i].getAttribute('href') === newHash ) {
            // store the link with href == newHash 
            // inside the currentActiveLink variable
            currentActiveLink = _links[i];
        }
    }

    // add active class to current active link
    currentActiveLink.parentElement.classList.add('active');
}

谢谢！

Answer 1

你是否有可能重绘导航？并没有真正通过你的代码，但我花了很长时间才发现我的SPI。我更改了一些参数，但我也ajax加载那些具有默认服务器端属性的元素... 编辑：是的，我可以看到你的应用程序中发生的事情

DOM / Page未更新，但console.log显示更新的值

1 个答案: