Загрузите часть после нажатия ссылки

В моем приложении мне нужно динамически изменить основной 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 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>

Но я просто понимаю, что с моим подходом, я нужны все divs, уже загруженные в DOM, которых у меня нет.

Любые идеи о том, как загрузить часть hbs, при нажатии на ссылку?

Создать предварительно скомпилированный шаблон Handlebars - это мой единственный вариант здесь?

Любой новый подход приветствуется :)

источник

2015-03-26 Giorgia Sambrotta

Что-то вроде этого: с помощью Jquery нагрузки и your code: $(currentSection).find('.next').attr('href') это incorect используется в вашем контексте :(

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

источник

2015-03-26 13:51:17 SilentTremor

это был мой первый подход, но что «страница» это только частичное, так нет, я не доступны :( –

В конце концов, я решил пойти на это решение: я включаю все мои партиалы в моей 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 частичных), но это тот, который делает то, что мне нужно сейчас.

Рад услышать новые решения

источник

2015-03-26 17:36:43

Загрузите часть после нажатия ссылки

ответ

Смежные вопросы