Question

首先感谢所有阅读我的问题。

我对jquery JQM和knockoutJS很新，并且在动态生成的html代码方面存在一些问题。

所以我有以下示例：我使用startPage.html启动我的应用程序，其中我加载所有脚本（jquery，jqm，knockout）并使用链接我转到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>

我尝试了其他几个我在这里看到的解决方案，但不幸的是，他们没有为我工作。

有人可以给我一个提示或告诉我应该怎么做，我没有任何其他想法。

提前致谢，我希望有人可以帮助我。

Answer 1

动态创建复选框后的代码应该这样做，

$("input[type='checkbox']").checkboxradio("refresh");

请查看以下类似问题的链接。

Dynamic controlgroup and checkboxes unstyled

动态jQuery Mobile注入和knockoutJS

1 个答案: