点击链接后加载部分答案

【问题标题】：Load partial after clicking link点击链接后加载部分
【发布时间】：2015-05-30 12:16:20
【问题描述】：

在我的应用程序中，我需要动态更改主 div，我的内容所在的位置，但与此同时，页脚和页眉始终相同。主要 div 是在grunt-handlebars-layouts 的帮助下创建的一系列车把部分。每个 div，只要点击一个链接就会改变。到目前为止，我的代码非常简单：

$( document ).ready(function() {

    $('section').on('click', '.next', function(){
        moveToNextSection(event);
    });

});

function moveToNextSection(event){
    event.preventDefault();
    var currentSection = event.currentTarget;
    var nextSectionId = $(currentSection).find('.next').attr('href');

    $(currentSection).closest('section').hide();
    // var newSection = find section with nextSectionId as id
    // $(newSection).show();

}

home.hbs 部分：

<section id="home">
    <h2>Welcome Home of {{projectName}}</h2> 
    <p>I'm the landing and first page </p>  
    <a href="aborto" class="next"> Click here to go to second step </a> 
</section>

aborto.hbs 部分：

<section id="aborto">
    <h1>I'm the second page</h1>
    <p>
        Sei in cinta e devi abortire? Cerca qui le info necessarie!
    </p>   
</section>

但我只是意识到，通过我的方法，我需要所有已加载到 DOM 中的 div，而我没有。

任何想法如何在单击链接时加载 hbs 部分？

创建预编译的 Handlebars 模板是我唯一的选择吗？

欢迎任何新方法:)

【问题讨论】：

标签： javascript jquery handlebars.js

【解决方案1】：

最后我决定采用这个解决方案：我在我的 index.html 中包含了我所有的部分

<html>
<head>
  <meta charset="UTF-8">
</head>

<body>

{{> home}}
{{> aborto}}

</body>
</html>

然后我用简单的js隐藏并显示我需要的部分：

$( document ).ready(function() {

    $('section').on('click', '.next', function(){
        moveToNextSection(event);
    });

});

function moveToNextSection(event){
    event.preventDefault();
    var currentSection = event.currentTarget;
    var nextSectionId = $(currentSection).find('.next').attr('href');

    $(currentSection).closest('section').hide();
    $('#' + nextSectionId).show();
}

可能不是最漂亮的解决方案，因为这意味着添加许多部分（现在只有两个，但应用程序计划有 50 个部分）但它是我现在需要的。

很高兴听到新的解决方案

【讨论】：

【解决方案2】：

类似这样的事情：使用 jquery load 和 your code: $(currentSection).find('.next').attr('href') 在你的上下文中是不正确的:(

<html>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<head>
  <title>My First HTML</title>
  <meta charset="UTF-8">
</head>

<body>

<section id="home">
    <h2>Welcome Home of {{projectName}}</h2>
    <p>I'm the landing and first page </p>
    <a href="http://www.localhost/aborto.hbs" ID="aborto" class="next"> Click here to go to second step </a>
</section>


</body>
<script>

$( document ).ready(function() {

    $('section').on('click', '.next', function(event){
        moveToNextSection(event);
    });

});

function moveToNextSection(event){
    event.preventDefault();
    var currentSection = event.currentTarget;
    var nextSectionId = $(currentSection).attr('id');

    $(currentSection).closest('section').hide();

    var nextPartialUrl = $(currentSection).attr('href');

    var wrapper = $('<div id="wrapper"><div></div></div>')
    wrapper.load(nextPartialUrl)

    $($(currentSection).closest('section')).after(wrapper);

    $('#' + nextSectionId).show();

}
</script>
</html>

您需要访问此页面：http://www.localhost/aborto.hbs

并返回这个

<section id="aborto">
    <h1>I'm the second page</h1>
    <p>
        Sei in cinta e devi abortire? Cerca qui le info necessarie!
    </p>   
</section>

【讨论】：

那是我的第一种方法，但那个“页面”只是一个部分，所以不，我无法访问:(