残りのowl：Knockout BindingHandlersとTypescript？

Question

thisの受け入れられた答えに従うことを本気で考えています。私はKnockout、Typescript、MVC、VS2017、そして私のパッケージのほとんどのためのノードモジュールを使っています。私が抱えている問題は、バインディングが呼び出されることはありませんが、ビルドエラーはありません。

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

あなたextensions.tsで、この定義ファイルは

---

ファイル

interface KnockoutBindingHandlers { 
     csharpTypes: KnockoutBindingHandler; 
    } 

リファレンス次のコードを追加します

このように私はこのようにcustomKoBindings.d.tsを作成しました。

/// <reference path="../../node_modules/@types/knockout/index.d.ts" /> 

interface KnockoutBindingHandlers { 
    dataTablesForEach: KnockoutBindingHandler; 
} 

---

私は私のCSHTMLに結合を適用しよう。ビューに使用できるようにするために、ko.bindingHandlerを自分のViewModelにプルする必要がありますか？

<table style="width: 100%" id="copyEmpTrainingSearchResultsTable" class="display" cellspacing="0"> 
               <thead> 
                <tr> 
                 <th data-bind="sort: { arr: employees, prop: 'firstName' }">First Name</th> 
                 <th data-bind="sort: { arr: employees, prop: 'lastName' }">Last Name</th> 
                 <th data-bind="sort: { arr: employees, prop: 'jobTitle' }">Job Title</th> 
                 <th data-bind="sort: { arr: employees, prop: 'primaryManager' }">Manager</th> 
                 <th data-bind="sort: { arr: employees, prop: 'department' }">Department</th> 
                 <th>Trainings</th> 
                </tr> 
               </thead> 
               <tbody data-bind="dataTablesForEach: {data: trainingEmployeeSearchResults, dataTableOptions: {}}"> 
                <tr> 
                 <td data-bind="text: firstName"></td> 
                 <td data-bind="text: lastName"></td> 
                 <td data-bind="text: jobTitle"></td> 
                 <td data-bind="text: primaryManager"></td> 
                 <td data-bind="text: department"></td> 
                 <td><button data-bind="click:$parent.seeTrainings"><i class="fa fa-eye"></i></button></td> 
                </tr> 
               </tbody> 
              </table> 

---

答えがextensions.tsへの結合を追加すると言うので、私は新しいファイルを作成しました。バインディングコードはhereです。私が作成したインターフェースをどのように参照しますか？何がこのファイルを指しているはずですか？

extensions.ts

import * as ko from "knockout" 
import * as $ from "jquery"; 

export class KnockoutExtensions { 
    // Constructor 
    constructor() { 
     ko.bindingHandlers.dataTablesForEach = { 
      page: 0, 
      init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
       console.log("init for dataTablesForEach"); 
       var options = ko.unwrap(valueAccessor()); 
       ko.unwrap(options.data); 
       if (options.dataTableOptions.paging) { 
        valueAccessor().data.subscribe(function (changes) { 
         var table = $(element).closest('table').DataTable(); 
         ko.bindingHandlers.dataTablesForEach.page = table.page(); 
         table.destroy(); 
        }, null, 'arrayChange'); 
       } 
       var nodes = Array.prototype.slice.call(element.childNodes, 0); 
       ko.utils.arrayForEach(nodes, function (node: Node) { 
        if (node && node.nodeType !== 1) { 
         node.parentNode.removeChild(node); 
        } 
       }); 
       return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext); 
      }, 
      update: function (element, valueAccessor, allBindings, viewModel, bindingContext) { 
       console.log("update for dataTablesForEach"); 
       var options = ko.unwrap(valueAccessor()), 
        key = 'DataTablesForEach_Initialized'; 
       ko.unwrap(options.data); 
       var table; 
       if (!options.dataTableOptions.paging) { 
        table = $(element).closest('table').DataTable(); 
        table.destroy(); 
       } 
       ko.bindingHandlers.foreach.update(element, valueAccessor, allBindings, viewModel, bindingContext); 
       table = $(element).closest('table').DataTable(options.dataTableOptions); 
       if (options.dataTableOptions.paging) { 
        if (table.page.info().pages - ko.bindingHandlers.dataTablesForEach.page == 0) 
         table.page(--ko.bindingHandlers.dataTablesForEach.page).draw(false); 
        else 
         table.page(ko.bindingHandlers.dataTablesForEach.page).draw(false); 
       } 
       if (!ko.utils.domData.get(element, key) && (options.data || options.length)) 
        ko.utils.domData.set(element, key, true); 
       return { controlsDescendantBindings: true }; 
      } 
     }; 
    } 
} 

---

アップデート：私は今、まだ私のViewModelが、initと更新のコンストラクタで試みた彼らはちょうどこれを行うDefinitelyTyped documentation's test、で

呼び出されない：

(<any>ko.bindingHandlers).countInits = { init: function() { initCalls++ } }; 

---

アップデート2：

私はこのプロジェクトでrequireJSを使用していません。 KnockoutBindingHandlerをリンクするために必要ですか？

---

アップデート3：

このarticleを確認した後、私は私のtsconfig.json内のノードモジュールを参照して上記customKoBindings.d.tsを参照しようとしましたしました。これはどちらも解決しませんでした。

{ 
    "compilerOptions": { 
    "outDir": "./wwwroot/build/", 
    "noImplicitAny": false, 
    "noEmitOnError": true, 
    "removeComments": false, 
    "sourceMap": true, 
    "target": "es6", 
    "module": "amd", 
    "moduleResolution": "node" 
    }, 
    "files": [ 
    "./Scripts/Common/customKoBindings.d.ts" 
    ], 
    "exclude": [ 
    "node_modules", 
    "wwwroot" 
    ] 
} 

---

更新消失数：それは作品 ！

はextensions.tsの先頭にこれを追加しました：私のmain.tsで

/// <reference path="./customKoBindings.d.ts" /> 

は、これを追加しました：

import { KnockoutExtensions} from "./Common/extensions" 
const koExt = new KnockoutExtensions(); 

Answer 1

はextensions.tsの先頭にこれを追加しました：

私 main.tsで

/// <reference path="./customKoBindings.d.ts" /> 

をこれを追加しました：

import { KnockoutExtensions} from "./Common/extensions" 
const koExt = new KnockoutExtensions();