【发布时间】：2013-03-25 17:08:56
【问题描述】：
首先感谢所有阅读我的问题的人。
我对 jquery JQM 和 knockoutJS 还很陌生，动态生成的 html 代码有一些问题。
所以我有以下示例：我使用 startPage.html 启动我的应用程序，在其中加载所有脚本（jquery、jqm、knout）并通过链接转到我想加载动态生成的数组的 secondPage.html复选框。
现在的问题是我得到了复选框，但我没有它们的 jqm 样式。
我的代码如下所示：
startPage.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" `"http://www.w3.org/TR/html4/loose.dtd">`
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>start Page</title>
<link href="jquery.mobile-1.3.0.css" rel="stylesheet" type="text/css" />
<link href="jquery.mobile.structure-1.3.0.css" rel="stylesheet" type="text/css" />
<link href="jquery.mobile.theme-1.3.0.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8" src="knockout.js"></script>
<script type="text/javascript" charset="utf-8" src="app/VM/WelcomeVM.js"></script>
<script type="text/javascript" charset="utf-8" src="app/VM/CheckboxVM.js"></script>
<script type="text/javascript">
//javascript code
var master = null;
var masterVM = function(){
var startVM = new welcomeVM();
var checkBoxHandler = new checkBoxVM();
return{
startVM:startVM,
checkBoxHandler:checkBoxHandler
}
}
$(document).ready(function(){
master = new masterVM();
ko.applyBindings(master);
});
$(document).bind("pageload",function(event,data){
ko.applyBindings(master);
});
</script>
</head>
<body>
<div data-role="page" id="home" data-theme="c">
<div data-role="content" id="content">
<div>
<a href="secondPage.html" data-role="button" >
</div>
</div>
</div>
</body>
</html>
我的 Knockout 视图模型如下所示，这里我生成 HTML 代码并填充复选框数组：
var checkBoxVM = function() {
var cbArray = [ "One", "Two", "Three", "Four", "Five"];
var htmlexampleCB = ko.observable();
init();
function init() {
$.each(cbArray, function(index, item) {
var htmlCB = "<input type=\"checkbox\" name=\"exampleCB\" id=\""
+ item + "\" value=\"" + item + "\"> ";
var htmlLabel = "<label for=\""+item+"\">"+item+"</label>";
var html = htmlCB + htmlLabel + "<br />";
var all = "";
if (htmlCompanyCB() != null) {
all = htmlCompanyCB();
}
all = all + html;
htmlCompanyCB(all);
});
alert(htmlexampleCB());
};
return {
htmlexampleCB:htmlexampleCB
};
};
secondPage.html 如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div data-role="page" id="gasPage">
<div data-role="content">
<!-- <div data-bind="html:companiesHandler.htmlexampleCB"> </div> -->
<script type="text/javascript">
$(document).ready(function(){
var newSet = '<fieldset data-role="controlgroup" class="cbGroup"></fieldset>';
$('.cbDiv').append(newSet);
var newBox = '<div data-bind="html:checkBoxHandler.htmlexampleCB">';
$(".cbGroup").append(newBox);
});
</script>
<div data-role ="fieldcontain" class="cbDiv">
<fieldset data-role="controlgroup" class="cbGroup">
</fieldset>
</div>
</div>
</div>
</body>
</html>
我尝试了我在这里看到的其他几种解决方案，但不幸的是它们都不适合我。
谁能给我一个提示或告诉我应该怎么做，我没有任何其他想法。
在此先感谢，我希望有人可以帮助我。
【问题讨论】：
-
如果你刷新页面，它们会被样式化吗？
-
你好，我试过这样
$(".cbGroup").append(newBox).trigger('create');但没有用，我也尝试刷新页面，就像我在其他帖子上看到的那样：function refreshPage() { $('#gasPage').page(); $('#gasPage').page('refresh'); }但这也没有为我工作 -
我的意思是如果你手动刷新它（f5），它可以工作吗？
-
哦，如果我这样做，我会从该页面上的其他内容、按钮和文本中丢失所有样式，那是因为我在第一页加载了 jquery 和 jqm。我认为这应该是一些简单的事情，但我不明白。