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不是一个函数

你知道为什么会发生这种事吗？

编辑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.task('move_pager',function(){
    gulp.src('bower_components/pager/dist/pager.min.js')
    .pipe(rename('pager.js'))
    .pipe(gulp.dest(web_folder));
});

Answer 1

我的问题是，由于某种原因，我通过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正确地加载空间，就像@King所说的那样。

Answer 2

不应该是：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 );
});