Question

在我的应用程序上，我需要动态地更改主要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 partial：

<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 parial：

<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模板是我唯一的选择吗？

欢迎采用任何新方法：）

Answer 1

这样的事情：在你的上下文中使用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>

您需要访问此页面：{{3p>

并返回此

<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 个答案: