SPA如何交換內容

乾杯！使用龍捲風io從頭開始構建網頁。我有不同的圖表，並希望使用一些單頁應用魔法。因此，我認爲做一個div和換出內容做：SPA如何交換內容

<div id="chartType"> Chart goes here</div> 
<a href="#" id="addContent">Load Graph</a> 
<div id="maincontent"></div> 

<script type="text/javascript"> 
$('#addContent').click(function(){ 
    $("#maincontent").replaceWith("{% include graph.html %}"); 
    return false; 
}); 
</script>

HTML似乎並不像{％包括graph.html％} 如果我這樣做$（「＃搜索Maincontent」）負載。（/路徑/到/文件）它不斷添加內容，而不是交換它。

我的問題是如何將div內容與不同的{％includes％}交換？
有沒有更好的方法做到這一點（我濫用％包括％）？

非常感謝

來源

2015-05-18 Sebastian Zaba

我相信$("#maincontent").load(/path/to/file);應該工作。我想你可能會觸犯緩存的運行，所以你可能需要這樣做：

var setMainContent = function(path) { 
    $.get({ 
     url: path, 
     cache: false 
    }, function(data){ 
     $("#maincontent").html(data); 
    }); 
};

然後調用你的函數在點擊處理程序：

setMainContent(/path/to/file);

來源

2015-05-18 05:13:27

我通常很簡單做些什麼內容交換是用CSS來處理它。例如，如果我有我想要在Div A中顯示的內容，並且我想用Div B替換它的內容，默認情況下，我將Div A設置爲'display：block'，將Div B設置爲'顯示：無'。然後，交換內容，使用javascript將Div A設置爲'display：none'，將Div B設置爲'display：block'。

var divA = document.getElementById('divA'); 
 
var divB = document.getElementById('divB'); 
 

 
function hideDivA() { 
 
\t divA.style.display = 'none'; 
 
} 
 
function showDivB() { 
 
\t divB.style.display = 'block'; 
 
} 
 

 
function swapContent() { 
 
\t hideDivA(); 
 
\t showDivB(); 
 
}

#divA { 
 
    background: #74CFAE; 
 
    color: #000; 
 
    display: block; 
 
} 
 
#divB { 
 
    background: #555; 
 
    color: #fff; 
 
    display: none; 
 
}

<div id='content-wrap' onclick='swapContent()'> 
 
    <div id='divA'>Div A (initially visible content)</div> 
 
    <div id='divB'>Div B (initially not visible content)</div> 
 
</div>

來源

2015-05-18 05:37:31

根據你的使用情況，您還可以創建一個模板，並分配到你的DOM。

例如，

<div id="runtime_area"></div> 
<script type="text/html" id="page1"> 
    <b>Banner</b> 
</script>

再後來

document.getElementById("runtime_area").innerHTML = document.getElementById("page1").innerHTML

來源

2015-05-18 07:41:07

SPA如何交換內容

回答

相關問題