Require+pager.js: pager.extendWithPage 不是函数

Question

我为我的 symfony 3 项目创建了以下树枝模板：

requirejs.config({
  baseUrl:'{{asset('') }}',
  paths:{

    'knockout':'{{ asset('assets/vendor/knockout') }}',
    'pager':"{{asset('assets/vendor/pager')}}",
    'bootstrap':"{{asset('assets/vendor/bootstrap/js/bootstrap')}}",

    'jquery':"{{asset('assets/vendor/jquery')}}",
    'jquery_ui':"{{ asset('assets/vendor/jquery-ui') }}",

    'xeditable_bootstrap':"{{ asset('assets/vendor/xeditable/xeditable.js') }}",
    'ko_xeditable':"{{ asset('assets/vendor/knockout/knockout.x-editable') }}",

    'jquery-fileupload':"{{ asset('assets/vendor/jquery_fileupload/jquery.fileupload') }}",
    'jquery-iframe':"{{ asset('assets/vendor/jquery_fileupload/jquery.iframe-transport') }}",
    'jquery-ui-widget':"{{ asset('assets/vendor/jquery_fileupload/jquery.ui.widget') }}",

    'masterViewModel':"{{ asset('assets/js/viewModels/masterViewModel') }}",

    {% block Viewmodels %}
    {% endblock %}

    'compMessage':'assets/js/components/message',
    'extBooleanToggle':'assets/js/extenders/booleanToggle',
  },
  shim:{
    'pager':['knockout'],
    'jquery_ui':['jquery'],
    'bootstrap':['jquery'],
    'xeditable_bootstrap':['jquery-ui','bootstrap'],
    'ko_xeditable':['xeditable_bootstrap'],
    'jquery-fileupload':['jquery-iframe','jquery-ui-widget'],
    'jquery-ui-widget':['jquery_ui'],//Jquery_ui already load jquery
    'jquery-iframe':['jquery']
    {% block CustomShim %}
    {% endblock %}
    },
  waitSeconds: 200,
});

require(['jquery','knockout','pager','masterViewModel'],function($,ko,pager,masterViewModel)
{
    console.log(pager);
    pager.extendWithPage(masterViewModel);
    ko.applyBindings(masterViewModel);
    pager.start();
});

然后我通过这个 symfony3 控制器方法渲染它：

 /**
 *@Route("/main.js",name="main_javascript")
 *@Method("GET")
 */
 public function frontpage_main()
 {
   $response=$this->render('main.js.twig');
   $response->headers->set('Content-Type', 'application/javascript');

   return $response;
 }

但是当我通过以下方式在我的视图中呈现它时：

<script src="{{asset('assets/vendor/require.js')}}" data-main="{{path('main_javascript')}}" ></script>

我在浏览器控制台收到以下错误消息：

pager.extendWithPage is not a function

您知道为什么会发生这种情况吗？

编辑 1：

我替换了：

require(['jquery','knockout','pager','masterViewModel'],function($,ko,pager,masterViewModel)
    {
        console.log(pager);
        pager.extendWithPage(masterViewModel);
        ko.applyBindings(masterViewModel);
        pager.start();
    });

有：

define(['jquery','knockout','pager','masterViewModel'],function($,ko,pager,masterViewModel)
{
    console.log(pager);
    pager.extendWithPage(masterViewModel);
    ko.applyBindings(masterViewModel);
    pager.start();
});

问题依旧。

编辑 2：

正如在我的控制台中看到的那样 pager.js 确实加载了：

编辑 3

根据要求，我的视图模型是：

define(['knockout','jquery'],function(ko,$){

    function MasterViewModel()
    {
        var self=this;

        self.title=ko.observable('');
        var classes=ko.observableArray(['hold-transition','register-page']);

        classes.subscribe(function(data){
            $('body').class(data.join(' '));
        });

        self.bodyRegister=function(){

        }
    }

    return new MasterViewModel();
})

编辑 4

我通过 bower 下载 pager.js，我的 bower.json 是：

{
  "name": "photoalbum",
  "authors": [
    "Dimitrios Desyllas (pc_magas) <you@example.com>"
  ],
  "description": "A simple photoalbum",
  "main": "",
  "keywords": [
    "photoalbum"
  ],
  "license": "AGPLv3",
  "homepage": "",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "AdminLTE": "admin-lte#^2.3.11",
    "require": "http://requirejs.org/docs/release/2.3.3/minified/require.js",
    "knockout": "^3.4.2",
    "pager": "^1.0.1",
    "jquery-slimscroll": "slimscroll#^1.3.8",
    "fastclick": "^1.0.6",
    "jquery": "^3.2.1",
    "jquery-ui": "^1.12.1",
    "x-editable": "https://github.com/vitalets/x-editable.git#^1.5.1",
    "knockout-x-editable": "https://github.com/brianchance/knockout-x-editable.git#^0.1.2"
  }
}

然后我像这样通过 gulp 移动它：

gulp.task('move_pager',function(){
    gulp.src('bower_components/pager/dist/pager.min.js')
    .pipe(rename('pager.js'))
    .pipe(gulp.dest(web_folder));
});

Answer 1

不应该是：require(['jquery','knockout','pager','masterViewModel'],function($,ko,pager,masterViewModel)

相反应该是 define(['jquery','knockout','pager','masterViewModel'],function($,ko,pager,masterViewModel)

编辑：

我可能首先发现了问题：

define('jquery-private', ['jquery','knockout','pager','masterViewModel'], function (jq,ko,pager,masterViewModel) {   
    console.log(pager);
    pager.extendWithPage(masterViewModel);
    ko.applyBindings(masterViewModel);
    pager.start();
    return jq.noConflict( true );
});

Answer 2

我的问题是由于某种原因我通过 bower 下载了错误的 js。最后bower.json应该是：

{
  "name": "photoalbum",
  "authors": [
    "Dimitrios Desyllas (pc_magas) <you@example.com>"
  ],
  "description": "A simple photoalbum",
  "main": "",
  "keywords": [
    "photoalbum"
  ],
  "license": "AGPLv3",
  "homepage": "",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "AdminLTE": "admin-lte#^2.3.11",
    "require": "http://requirejs.org/docs/release/2.3.3/minified/require.js",
    "knockout": "^3.4.2",
    "pager": "https://github.com/finnsson/pagerjs.git",
    "jquery-slimscroll": "slimscroll#^1.3.8",
    "fastclick": "^1.0.6",
    "jquery": "^3.2.1",
    "jquery-ui": "^1.12.1",
    "x-editable": "https://github.com/vitalets/x-editable.git#^1.5.1",
    "knockout-x-editable": "https://github.com/brianchance/knockout-x-editable.git#^0.1.2"
  }
}

同样在 main.js 上使用 jquery 正确加载 shim 并按照@King Reload 所说的进行敲除。

Require+pager.js: pager.extendWithPage 不是函数

Require+pager.js: pager.extendWithPage is not a function

javascript

symfony

requirejs

pagerjs

编辑 1：

编辑 2：

编辑 3

编辑 4