### 前提・実現したいこと TypeScript + Knockout.JSにおいて、サーバから取得したListをdata-bind=foreachで展開し、foreach内のclickにメソッドをbindしたい現在、Knockout.JSが使われたJavaScirptをTypeScriptに置き換え、関数をクラス化する作業を行っております。元のソースの中で、サーバから取得したResultListをmapping.fromJSによりbindし、foreachで展開している箇所があるのですが、元のJavaScirptの関数をクラス化してbindしようとした際、クラス内のメソッドを参照することができず、エラーが発生してしまっております。正しく展開する方法を教えていただけないでしょうか。 ### 発生している問題・エラーメッセージ ``` Uncaught Reference Error: Unable to process binding "foreach: function(){return hogeList}" Message: Unable to process binding "click: function(){return hoge} Message hoge is not defined ``` ### 該当のソースコード ```html ***略***

***略*** ``` ■元ソース ```javascript ***略*** hoge = function () { var self = this; bootbox.confirm('実行しますか？', function (r) { if (r) { $.ajax({ type: "post", url: url, data: { ID: self.ID(), flag: 1 }, cache: false, dataType: "json", }).done(function (result) { if (!result.Result) { bootbox.alert(result.Message); } else { self.Status(-1); try { viewModel.keepList.ID(null); ***略*** } finally { } listUpdate(); get(); } }); } } } ***略*** $(function () { viewModel = {}; $.ajax({ type: "post", url: url, cache: false, dataType: "json" }).done(function (result) { viewModel = ko.mapping.fromJS(result); ko.applyBindings(viewModel); ***略*** }) ***略*** )}; ``` ■修正後ソース ```typescript ***略*** class hogeClass { ***略*** hoge(): void { let self = this; bootbox.confirm('実行しますか？', function (r) { if (r) { $.ajax({ type: "post", url: url, data: { ID: self.ID(), flag: 1 }, cache: false, dataType: "json", }).done(function (result) { if (!result.Result) { bootbox.alert(result.Message); } else { self.Status(-1); try { viewModel.keepList.ID(null); ***略*** } finally { } listUpdate(); get(); } }); } } } } ***略*** $(function () { let viewModel = {}; $.ajax({ type: "post", url: url, cache: false, dataType: "json" }).done(function (result) { viewModel = ko.mapping.fromJS(result, {}, new hogeClass()); ko.applyBindings(viewModel); ***略*** }) ***略*** )}; ``` ```json { ResultList: [ ActiveFlag: 0, BorderLineFlag: 1, Day: "2021/10/20", hogeList:[ ***略*** ID: xxxx, ***略*** ] ***略*** ] } ``` ### 試したこと・viewModelをmappingする際の順序の変更などは試しました。・先にhogeClassだけをapplyBindingsし、後からmapping.fromJSでresultを追加する方法を試しました・ko.mapping.fromJS(ko.mapping.fromJS(result), {}, new hogeClass());とし、resultを先にマッピングすることを試しましたまた、hogeメソッドを「public hoge: () => void;」として先に定義し、constructorで中身を実装するなどもしてみました ### 使用環境・ツールなど Visual Studio 4.8.04084 typescript 3.9.10 jquery: 3.6.0 knockout: 3.5.1 knockout.mapping: 2.4.0 webpack: 5.44.0 ASP.NET MVC 5 TypeScript compileOptions target: ES2020 module: ESNext

	@@ -1 +1 @@
1	- TSでknockoutをbind
1	+ TS+knockoutでforeach内clickにメソッドをbindしたい

質問編集履歴