Question

我已经成功地在我正在使用的SPA上实现了crossroadsJS和hasherJS的路由和散列。我从REST API加载的数据完全基于事件。这适用于通过基于点击的事件在网站上导航。但是，我想实现键入URL（或刷新当前视图）并加载与该URL对应的数据的功能。我写了一个像这样的方法：

// app.js
app.helpers = {
    routeMagic: function (prop, clicked, type, el) {
        var parser = document.createElement('a');           // setup parsing
        parser.href = hasher.getURL();                      // use hasher's .getURL() to find current URL
        var splitURL = parser.hash.split('/')[2];           // split at second / ... example: /conditions/annual-wellness-exam => annual-wellness-exam

        propArr = [];       // set up array to store name property
        for (var i=0, len=prop.length; i<len; i++) {
            propArr.push(prop[i].name.replace(/,/g, "").replace(/\//g, "").replace(/[()]/g, "").replace(/\s+/g, "-").toLowerCase());
        }

        $(el).each(function () {           // target li ... example ‘.returned-list li’
            var val = $(this);   
            val.id = propArr;              // append name to li id
            var id = $(this).attr('id');

            // this is only executing on click event, need it to execute on refresh or typing in URL 
            if (splitURL === id) {       // find a match
                console.log('match found');
                clicked = val.children().attr('data-id');       // determine where to route the page to based off data-id 

                return false;
            }
        });
        type(clicked);                  // init crossroads routing
    }
};

将会这样称呼：

// routes.js
conResultsRoute = crossroads.addRoute('conditions/{name}', function () {
    app.helpers.routeMagic(cache.lists.conditions, cache.justClickedCondition, api.endpoints.condition, '.returned-list li');
});

对于此示例，当我从条件列表中单击“条件”链接时，将在以下路径上返回预期结果。但是，如果我尝试输入相同的URL，我会收到存储在CMS中的所有数据的列表，而不是我点击应用程序时的过滤列表。我认为问题源于无法在页面加载时定位$(el).each()，因为它存放在不同的模板中，或者每次输入URL时我都必须重新加载API调用。我想这对于有人排除故障的数据不够，所以请随时向我提出更多问题或查看实时（开发中）版本here

如果您正在访问该网站，请尝试以下流程：条件（主导航） - ＆gt;年度健康检查 - ＆gt;刷新或点击在URL栏中输入

解析URL并加载相应的数据

0 个答案: