2016-09-29 4 views
0

これまで私は "xdan/datetimepicker" v2.4.0を使用していました。しかし、私はそれをアップグレードする必要があったとアップグレード後にスヌットの仕事doe。 それtrows:

vendor.js:20065 Uncaught TypeError: Unable to process binding "with: function(){return $root.manageView }" 
Message: Unable to process binding "datetimepicker: function(){return timeFrom }" 
Message: $element.datetimepicker is not a function 

私の "package.json" ファイルがあります:

{ 
"name": "App1", 
    "version": "1.0.0", 
    "description": "App1 Testing", 
    "main": "./src/app/app.js", 
    "scripts": { 
    "test": "" 
    }, 
    "browserify": { 
    "transform": [ 
     "browserify-shim", 
     "debowerify" 
    ] 
    }, 
    "browser": { 
    "bootstrap": "./node_modules/bootstrap-sass/assets/javascripts/bootstrap.js", 
    "jquery.datetimepicker": "./node_modules/jquery-datetimepicker/jquery.datetimepicker.js", 
    "jquery.xdomainrequest": "./src/vendor/jquery.xdomainrequest.min.js", 
    "datatables": "./src/vendor/datatables/jquery.dataTables.min.js", 
    "datatables.bootstrap": "./src/vendor/datatables/dataTables.bootstrap.js", 
    "datatables.scroller": "./src/vendor/datatables/dataTables.scroller.min.js", 
    "spectrum": "./src/vendor/spectrum/spectrum.js", 
    "stringformat": "./src/vendor/stringformat-1.09.min.js",   
    "jquery.fileDownload": "./src/vendor/jquery.fileDownload.js" 
    }, 
    "browserify-shim": {   
    "translations": "global:translations", 
    "jquery-datetimepicker": { "depends": [ "jquery:$" ] } 
    }, 
    "author": "XXX", 
    "license": "ISC", 
    "devDependencies": { 
    "bootstrap-sass": "^3.3.6", 
    "browserify": "^13.0.0", 
    "browserify-shim": "^3.8.12", 
    "colors": "^1.1.2", 
    "debowerify": "^1.3.1", 
    "gulp": "^3.9.1", 
    "gulp-concat": "^2.6.0", 
    "gulp-replace": "^0.5.4", 
    "gulp-ruby-sass": "^2.0.6", 
    "gulp-sass": "^2.3.2", 
    "gulp-sourcemaps": "^1.6.0", 
    "gulp-uglify": "^1.5.3",   
    "jquery.cookie": "^1.4.1",   
    "lodash": "^4.6.1", 
    "moment": "^2.11.2", 
    "phantomjs-prebuilt": "^2.1.4", 
    "typescript": "^2.0.3", 
    "vinyl-buffer": "^1.0.0", 
    "vinyl-source-stream": "^1.1.0", 
    "watchify": "^3.7.0" 
    }, 
    "dependencies": {   
    "factor-bundle": "^2.5.0", 
    "jquery": "^2.2.1", 
    "jquery-datetimepicker": "2.5.4", 
    "knockout": "^3.4.0",   
    } 
} 

"vendor.js" ファイル:

// jQuery plugins 
require('jquery.cookie');   
require('jquery.datetimepicker'); 
require('jquery.fileDownload'); 
require('spectrum')(window.jQuery);  // Shimmed 
require('bootstrap');     // Shimmed 

// Exposing DataTable for it's plugins to work 
window.DataTable = require('datatables'); // Shimmed 
require('datatables.scroller');    // Shimmed  

// Enables String.format functionality 
require('stringformat');     // Shimmed 

// Other vendors scripts 
// Loaded here so that they won't appear in the 
// main app bundle 
require('knockout');  
require('moment'); 

これはknockoutBinding.jsです:

/* Date picker value binder for knockout */ 
    (function (ko) { 
     ko.bindingHandlers.datetimepicker = { 
      init: function (element, valueAccessor, allBindingsAccessor) { 
       var $element = $(element); 
       var value = valueAccessor(), allBindings = allBindingsAccessor(); 
       var valueUnwrapped = ko.utils.unwrapObservable(value); 
       var options = allBindings.dtPickerOptions || {};  
       **$element.datetimepicker({** 
        step: 15, 
        format: config.timeFormat, 
        formatTime: config.timeFormatHours, 
        formatDate: config.timeFormatDate,      
        onChangeDateTime: function (dp, $input) { 
         var date = moment($input.val(), config.timeFormat); 
         date.set('second', 0); 
         var observable = valueAccessor(); 
         observable(date.format(config.timeFormat)); 
        }, 
        lang: 'custom', 
        i18n : { 
         custom: translationController.datePicker 
        }     
       }); 

      }, 
      update: function (element, valueAccessor) { 
       var valueUnwrapped = ko.utils.unwrapObservable(valueAccessor()); 
       var obs = valueAccessor(); 
       $(element).val(moment(valueUnwrapped, config.timeFormat).format(config.timeFormat)); 
      } 
     }; 
    })(ko); 

ここからは何ですか。なぜ$ element.datetimepickerが見つからないのですか? -

答えて

0

発見ソリューションは、それが私の仕事:

paskage.json:

"browser": { 
... 
"jquery.datetimepicker": "./node_modules/jquery-datetimepicker/jquery.datetimepicker.min.js" 
}, 
"browserify-shim": { 
... 
"jquery.datetimepicker": { "depends": [ "jquery:$" ] } 
}, 
"dependencies": { 
    ... 
    "jquery": "^2.2.4", 
    "jquery-datetimepicker": "2.5.4", 
} 

注:それはので、縮小さないバージョン( "jquery.datetimepicker.js")を使用しないでください。 bug described hereです。

window.jQuery = require('jquery'); 
require('jquery.datetimepicker')(window.jQuery); 
vendors.js

gulpfile.js

var externalVendorModules = ['jquery', 'jquery.datetimepicker','moment']; 

関連する問題