6

私はいくつかのjavascriptコードをtypescriptに移植し、requirejsを使用しています。私は config.ts を持っています:

//file config.ts
///<reference path="../require.d.ts" />
///<reference path="DataLayer.ts" />

require.config({
    baseUrl: '/scripts/App/',

    paths: {
        'jQuery': '/scripts/jquery-1.9.1',
        'ko': '/scripts/knockout-2.2.1',
        'signalR': "/scripts/jquery.signalR-1.0.1",
    },

    shim: {
        jQuery: {
            exports: '$'

        },
         signalR:{
            deps: ["jQuery"]
         },
         ko: {
             deps: ["jQuery"],
             exports: 'ko'
         }
    }
});

// load AMD module main.ts (compiled to main.js)
// and include shims $, _, Backbone

require(['DataLayer', 'signalR', 'ko'], (d ) => {
    alert('test');
    var app = new d.DataLayer();
    app.run();
  //  app.run();

});

それはロードされています：

<script data-main="/Scripts/App/config" type="text/javascript" src="~/scripts/require.js"></script>

次を実行するスクリプトタグをページに配置する前に：

ko.bindingHandlers.csharpTypes = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        var value = valueAccessor();

        switch (value) {
            case 'System.Boolean':
                element.type = 'checkbox';
                break;
            case 'System.String':
                element.type = 'string';
                break;
            case 'System.DateTime':
                //$(element).replaceWith("<input placeholder='value' data-bind='value:value, uniqueId: name, csharpTypes:type'/>");
                element.type = 'datetime';
                break;
            default:
                element.type = 'number';
        }


    }

};

拡張機能がノックアウトに追加されました。このコードを今どこに置くか 100% 確信が持てませんか? ページ内にある場合は、requirejs によってノックアウトが読み込まれる前に読み込まれます。私はそれをrequirejsでロードする必要があると思いますが、どうすればよいかわかりません。typescript クラスで、または単に config.ts で?

require(['DataLayer', 'signalR', 'ko'], (d ) => {
        alert('test');
        var app = new d.DataLayer();
        app.run();
      //  app.run();

    });

私が試してみました：

extensions.ts

     ///<reference path="knockout.d.ts" />    
    export class KnockoutExtenions {
        // Constructor
        constructor() {
            ko.bindingHandlers.csharpTypes = {
                init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                    var value = valueAccessor();

                    switch (value) {
                        case 'System.Boolean':
                            element.type = 'checkbox';
                            break;
                        case 'System.String':
                            element.type = 'string';
                            break;
                        case 'System.DateTime':
                            //$(element).replaceWith("<input placeholder='value' data-bind='value:value, uniqueId: name, csharpTypes:type'/>");
                            element.type = 'datetime';
                            break;
                        default:
                            element.type = 'number';
                    }


                }

            };
      }
}

しかし、ko.bindinghandlers の csharpTypes でエラーが発生します。

4

1 に答える 1

5

既存の TypeScript インターフェースをすぐに拡張できます。独自のバインディング ハンドラーを定義するには、次のことを行う必要があります。

  1. 定義ファイルを提供します（たとえばmyBindings.d.ts）

  2. 次のコードを追加します

    interface KnockoutBindingHandlers {
    csharpTypes: KnockoutBindingHandler;
}
  3. extensions.ts ファイルでこの定義ファイルを参照します。
于 2013-04-08T09:52:44.293 に答える