SPA如何交换内容

SPA how to swap content

本文关键字：交换 何交换 SPA      更新时间：2023-09-26

干杯！使用龙卷风io从头开始构建网页。我有不同的图表，想使用一些单页应用程序魔术。所以我想做一个div并交换内容做：

<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似乎不喜欢｛%include graph.HTML%｝如果我做了类似$("#maincontent"(.load(/path/to/file(的操作，它会不断添加内容，而不会交换。

  1. 我的问题是如何用不同的｛%includes%｝交换div内容
  2. 有更好的方法吗(我是不是滥用了%includes%(

非常感谢

我认为$("#maincontent").load(/path/to/file);应该起作用。我认为你可能正在与缓存冲突，所以你可能需要这样做：

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

然后调用点击处理程序中的函数：

setMainContent(/path/to/file);

我通常使用非常简单的内容交换来处理它。例如，如果我有我想在Div A中显示的内容，而我想在Div B中替换它的内容，默认情况下，我会将Div A设置为"display:block"，将Div B设置为"display：none"。然后，要交换内容，请使用javascript将Div A设置为"display:none"，将Div B设置为"display：block"。

var divA = document.getElementById('divA');
var divB = document.getElementById('divB');
function hideDivA() { 
	divA.style.display = 'none';
}
function showDivB() {
	divB.style.display = 'block';
}
function swapContent() {
	  hideDivA();
	  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>

根据您的用例，您还可以创建一个模板并将其分配到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
相关文章：