2

そこで、 requirejsと剣道 uiとノックアウト JSを併用したいと考えています。

Using Kendo with RequireJS and Knockout JS article Asynchronous Module Definition (AMD) With RequireJsを読み、 Knockout.js と Kendo UIを介してKnockout-Kendoライブラリを見つけました。虹、MVVM、AMD、HTML5 の甘美さの美しい世界にいようとしています。

しかし今、私は痛みと苦しみの暗い地下世界にいるように思えます. これが取引です...

内部に次のjsフォルダーがある単純な Web サイトがあります。

  • jquery-2.0.3.min.js
  • ノックアウト-2.3.0.js
  • ノックアウト剣道.min.js
  • require.js
  • kendo-ui/** ここにすべての剣道ファイル

そして、これを含むルートに配置したindex.htmlファイル:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/require.js"></script>
</head>
<body>
    <div id="grid" data-bind="kendoGrid: items"> </div>    
    <script type="text/javascript">            
        require.config({
            baseUrl : 'js',
            paths: {
                'jquery': 'jquery-2.0.3.min',
                'knockout': 'knockout-2.3.0',
                'kendo': 'kendo-ui',
                'knockout-kendo': 'knockout-kendo.min',
            },
            shim: {
                'jquery': {
                    exports: 'jQuery'
                }
            }            
        });        
        define('mainViewModel', ['knockout'], function (ko) {
            return function mainViewModel(){
                this.items = ko.observableArray([
                    { id: "1", name: "apple"},
                    { id: "2", name: "orange"},
                    { id: "3", name: "banana"}
                ]);
            };
        });    
        require(['jquery','knockout','mainViewModel','knockout-kendo'], 
            function($, ko, mainViewModel) {
                ko.applyBindings(new mainViewModel());
        });
    </script>
</body>
</html>

私が理解できる限り、それは基本的に正しいはずですが、この例外が発生しています:

GET http://localhost/ko-kendo/js/kendo-ui.js [HTTP/1.1404 Not Found 1ms] 
Error: Script error for: kendo
http://requirejs.org/docs/errors.html#scripterror @http://localhost/ko-kendo/js/require.js:163

knockout-kendo は kendo-ui.js を読み込もうとしているようですが、存在しないため、当然のことながら、それを見つけることができません。

マッピングを検証するために、私はこれをノックアップしました:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/require.js"></script>
</head>
<body>
    <div id="grid" data-bind="kendoGrid: items"> </div>    
    <script type="text/javascript">            
        require.config({
            baseUrl : 'js',
            paths: {
                'jquery': 'jquery-2.0.3.min',
                'knockout': 'knockout-2.3.0',
                'kendo': 'kendo-ui',
                'knockout-kendo': 'knockout-kendo.min',
            },
            shim: {
                'jquery': {
                    exports: 'jQuery'
                }
            }            
        });        
        define('mainViewModel', ['knockout'], function (ko) {
            return function mainViewModel(){
                this.items = ko.observableArray([
                    { id: "1", name: "apple"},
                    { id: "2", name: "orange"},
                    { id: "3", name: "banana"}
                ]);
            };
        });    
        require(['jquery','knockout','mainViewModel','kendo/kendo.grid.min'], 
            function($, ko, mainViewModel) {
                var vm = new mainViewModel();            
                $(document).ready(function () {
                    $('#grid').kendoGrid({
                        dataSource: new mainViewModel().items()
                    });
                });            
                ko.applyBindings(vm);
        });
    </script>
</body>
</html>

それは素晴らしく機能しました（まあ、うまくいきました）-2つの違いは、2番目のケースではノックアウト剣道を使用していないため、バインディングが適用されないことであることがわかります。ドキュメントレディ機能。

では、この緑の美しい地球で、require JS を使用してノックアウト剣道を行う方法を知っている人はいますか? シムでうまくいく何か空想があるかもしれない気がしますが、うまくいきません...

4

1 に答える 1

1

Knockout-Kendo はモジュールに依存するように設定されていkendoます。最も簡単な方法はkendo、次のkendo.webようなファイルを指定することですkendo: kendo.web.min(ディレクトリkendo.web.min.jsがどこにあっても)。

于 2013-08-30T11:15:13.280 に答える