单击链接后加载部分

Question

On my app I need to dinamically change the main div, where my content is, but at the same time, footer and header are always the same. 在我的应用程序上，我需要动态更改主div，即内容所在的位置，但同时，页脚和页眉始终相同。 The main div are series of handlebars partials create with the help of grunt-handlebars-layouts . 主要的div是在grunt-handlebars-layouts的帮助下创建的一系列把手局部。 Each div, will change simply clicking on a link. 每个div，只需点击链接即可更改。 Untill now my code is very simple: 到目前为止，我的代码非常简单：

$( 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: 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 parial: 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>

But I just realize that with my approach, i need all the divs already loaded in the DOM, which I don't have. 但是我只是意识到，使用我的方法，我需要已经在DOM中加载的所有div，而我没有。

Any ideas how to load a hbs partial, when clicking on a link? 任何想法如何在单击链接时加载hbs局部文件？

Create pre-compiled Handlebars template is my only option here? 创建预编译的车把模板是我唯一的选择？

Any new approach is welcome :) 任何新方法都欢迎:)

Answer 1

Something like this: using jquery load and your code: $(currentSection).find('.next').attr('href') is incorect used in your context :( 这样的事情：使用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>

You need this page accessible: http://www.localhost/aborto.hbs 您需要此页面可访问： http：//www.localhost/aborto.hbs

and returning this 并返回这个

<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

At the end I decided to go for this solution: I include all my partials in my index.html 最后，我决定采用这种解决方案：我将所有的部分内容都包含在index.html中

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

<body>

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

</body>
</html>

Then I hide and show the partials i need with simple js as: 然后，我用简单的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();
}

Is probably not the most beautiful solution, since imply adding many partials (now there are just two but the app planning to have 50 partials) but is the one that does what i need for now. 可能不是最漂亮的解决方案，因为这意味着要添加许多局部（现在只有两个，但是应用程序计划有50个局部），但这是满足我现在需要的一个。

Happy to hear new solutions 很高兴听到新的解决方案

单击链接后加载部分

问题描述

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