本文介绍了在使用Typescript和requirejs时,我在哪里放置我的Knockout.js扩展的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在将一些javascript代码移植到typescript并使用requirejs。我有一个config.ts:

I am in the process of porting some javascript code to typescript and using requirejs. I have a 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>

在我的页面上有一个执行以下内容的脚本标签之前:

Before i just had a scripttag on my page that executed the following:

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%肯定我现在把这个代码放在哪里?
如果它在页面中,它在knockout之前加载由requirejs加载。我假设我需要装载requirejs,我只是不确定我会怎么做。在打字稿类中,或者只是在config.ts中?

and the extension was added to knockout. I am not 100% sure where i would put this code right now? If its in the page, its loaded before knockout get loaded by requirejs. I assume i need to get it loaded with requirejs, i am just not sure about how i would do it. In a typescript class or maybe just in the config.ts ?

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

    });



我试过:



扩展名。 ts

I have tried:

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的csharpTypes错误.bindinghandlers。

but it gives me a error on the csharpTypes of ko.bindinghandlers.

推荐答案

您可以扩展现有的TypeScript接口。要定义自己的绑定处理程序,您需要做的就是:

You can extend existing TypeScript interfaces out of the box. To define your own binding handlers, all you need to do is:


  1. 提供定义文件(例如 myBindings。 d.ts

  2. 添加以下代码

  1. provide a definition file (say myBindings.d.ts)
  2. add the following code

interface KnockoutBindingHandlers {
    csharpTypes: KnockoutBindingHandler;
}


  • 在extensions.ts文件中引用此定义文件

  • 这篇关于在使用Typescript和requirejs时,我在哪里放置我的Knockout.js扩展的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

    11-01 04:20