Question

干杯！使用龙卷风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）的操作，它会不断添加内容而不会交换内容。

我的问题是如何将div内容与不同的{％includes％}交换？
有没有更好的方法（我是否误用％include％）？

非常感谢

Answer 1

我相信$("#maincontent").load(/path/to/file);应该有效。我认为你可能会遇到缓存问题，所以你可能需要这样做：

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

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

setMainContent(/path/to/file);

Answer 2

我通常使用非常简单的内容交换来使用css来处理它。例如，如果我想要在Div A中显示我想要显示的内容以及我想要在Div B中替换它的内容，默认情况下我会将Div A设置为＆＃39; display：block＆＃39;和Div B设置为显示：无＆＃39;。然后，要交换内容，请使用javascript将Div A设置为＆＃39; display：none＆＃39;和Div B设置为＆＃39; display：block＆＃39;。

＆＃13;

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();
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

根据您的使用案例，您还可以创建模板并将其分配到DOM中。

例如。

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

之后

{{1}}

SPA如何交换内容

3 个答案: