我为我的 symfony 3 项目创建了以下 twig 模板：
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 移动它：
gulp.task('move_pager',function(){
gulp.src('bower_components/pager/dist/pager.min.js')
.pipe(rename('pager.js'))
.pipe(gulp.dest(web_folder));
});