单击链接后加载部分

Question

在我的应用程序上，我需要动态更改主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局部文件？

创建预编译的车把模板是我唯一的选择？

任何新方法都欢迎:)

Answer 1

这样的事情：使用jquery加载和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>

Answer 2

最后，我决定采用这种解决方案：我将所有的部分内容都包含在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 个解决方案

解决方案1
0 2015-03-26 13:51:17

解决方案2
0 2015-03-26 17:36:43

单击链接后加载部分

问题描述

2 个解决方案

解决方案1 0 2015-03-26 13:51:17

解决方案2 0 2015-03-26 17:36:43

解决方案1
0 2015-03-26 13:51:17

解决方案2
0 2015-03-26 17:36:43