如何在html标记行中调用一个要求模块的方法

Question

我必须在html标记line.Also中调用require模块，它是deprecate.I，我认为当html标记动态生成时，它是必需的。

所需模块：

define('index',['jquery','common','stat'],function($,common,stat){
return{
    rankList:function(name){
        stat.ranklist(name,function(data){
            console.log('invoked...');

        });
    }
}

})；

html标签行：

  <ul class="nav nav-tabs" id="myTab">
                <li class="active"><a href="#task" data-toggle="tab" onclick="rankListCall.rank('asCount')"><em><strong>任务量大咖</strong></em></a></li>
                <li><a href="#income" data-toggle="tab" onclick="rankListCall.rank('totalAmount')"><em><strong>收入大咖</strong></em></a></li>
                <li><a href="#right" data-toggle="tab" onclick="rankListCall.rank('accurateRate')"><em><strong>准确大咖</strong></em></a></li>
            </ul>

在html中加载脚本：

<script type='text/javascript'  src="http://cdn.staticfile.org/require-jquery/0.25.0/require-jquery.js"></script>

<script type='text/javascript' src="../../static/js/app.min.js"></script>

我在html中尝试的javascript：

<script type="text/javascript">
var rankListCall=(function(){
    var index=require(['index']);
    return{
        rank:function(name){
            index.rankList(name);
        }
   }
})();

​

我看到了脚本错误

index.rankList(name);

Uncaught TypeError: undefined is not a function 

Answer 1

大多数需求模块不会将它们的对象导出到全局命名空间(jQuery是这方面的一个臭名昭著的例外，但让我们假设它不是)。因此，您应该尝试在require中处理您的函数和行为。无论导出和包含多少内容，DOM都无法“看到”您的函数，除非您将它们导出为(例如) window.rankList，但这就像挫败require的目的一样。

为了同时访问dom和stat函数，我会这样做。

define(['jquery','common','stat'],function(jQuery,common,stat){

    jQuery(document).on('click','.rankListCall',function() {
        var name=jQuery(this).data('name');
        stat.ranklist(name,function(data){
            console.log('invoked...',name,data);
        });
    });
});

和yout html代码

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#task" data-toggle="tab" class="rankListCall" data-name="asCount"><em><strong>任务量大咖</strong></em></a></li>
    <li><a href="#income" data-toggle="tab" class="rankListCall" data-name="totalAmount"><em><strong>收入大咖</strong></em></a></li>
    <li><a href="#right" data-toggle="tab" class="rankListCall" data-name="accurateRate"><em><strong>准确大咖</strong></em></a></li>
</ul>

与其尝试将函数导出到全局命名空间，不如将逻辑与DOM保持分离。这样，您就可以同时处理require部分中的函数和行为。在本例中，我向元素中添加了一个类和一个数据属性，以允许jQuery在它们上委托事件。