Question

这是我第一次使用物化设计为我的基于cordova的Windows手机应用程序。在静态html页面中，一切都运行正常，具有物化功能（如侧栏，标签，模态等）。

但是，动态加载模板，然后调用与材质相关的js相关函数是一个大问题！。问题是我无法在加载后从materialize文件中调用任何函数。

这就是我为物化加载js文件的方式：

<script src="lib/js/jquery-2.1.1.min.js"></script>        
<script src="lib/js/materialize.js"></script>

我尝试从控制台调用$(".button-collapse").sideNav();，$("ul.tabs").tabs();（在加载必要的模板后），但我收到错误$(..).sideNav is not a function，tabs也是如此还

我在materialze.js中的$.fn.tabs函数中放置了断点，同时刷新了页面，然后它命中了该函数，但是在所有加载后，如果我再次尝试调用该函数，它会给出错误$(..).tabs() is not function。

所以，我被困在这里。我有什么遗失的东西吗？我怎样才能做到这一点？

修改：

的index.html

<!DOCTYPE html>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
        <title>FTMobile</title>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link href="css/font-awesome.css" type="text/css" rel="stylesheet" media="screen,projection" />
        <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
        <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
    </head>
    <body>
        <div id="mainContainer"></div>

        <script src="lib/bin/jquery-2.1.1.min.js"></script>
        <script src="lib/bin/jquery-ui-1.10.3.custom.min.js"></script>
        <script src="lib/bin/materialize.js"></script>

        <script data-main="js/cordovaConfig.js" src="lib/js/require.min.js"></script>
    </body>
</html>

模板：

＆＃13;

<script id="infoPageTpl" type="text/x-handlebars-template">
            <div class="row">
                <div class="col s12">
                    <ul class="tabs">
                        <li class="tab col s3"><a href="#taginfo">Tag info</a></li>
                        <li class="tab col s3"><a href="#prodinfo">Product info</a></li>
                    </ul>
                </div>

                <div id="taginfo" class="col s12">
                    <ul class="collection">
                    {{#each tagInfoData}}
                        <li class="collection-item">
                            <span class="title">{{attributName}}</span>
                            <p>{{attributeValue}}</p>
                        </li>
                    {{/each}}
                    </ul>
                </div>

                <div id="prodinfo" class="col s12">
                    <ul class="collection">
                    {{#each productInfoData}}
                        <li class="collection-item">
                            <span class="title">{{attributeName}}</span>
                            <p>{{attributeValue}}</p>
                        </li>
                    {{/each}}
                    </ul>
                </div>
            </div>
        </script>

＆＃13;

Js代码：

define([
    "require",
    "exports",
    "marionette",
    "backbone",
    "underscore",
    "js/applicationUtilities/commonFunctions"
    ],function(
        require,
        exports,
        Marionette,
        Backbone,
        _,
        commonFunctions
    ){
        "use strict";
        exports.TagandProductInfoView=Backbone.Marionette.ItemView.extend({
            render:function(){
                var tagJson = this.model.get("currentTag").tagJson,
                    tagInfoData=this.buildDataForTemplating(tagJson.tagInfo),
                    productInfoData=this.buildDataForTemplating(tagJson.productInfo);

                this.el.innerHTML= commonFunctions.templateCompilation("infoPageTpl",{"tagInfoData":tagInfoData,"productInfoData":productInfoData});
            },
            onShow:function(){
                $('ul.tabs').tabs();
            },
            buildDataForTemplating:function(infoData){
                var data=[];
                for(var key in infoData){
                    data.push({
                        attributeName:key,
                        attributeValue:infoData[key]
                    });
                }
                return data;
            }
        });
});

无法从materialize.js文件

0 个答案: