将razor视图内联javascript移动到外部打字稿文件

Question

I had a razor view with inline javascript which with time has become messy, and now I am moving all js (except some minimal initialization code) to external typescript file. It would be nice to make the js code reusable, but it is very much specific to this particular view. The js code depends heavily on many html elements. What I have is something like this:

module MyModule{

export class SomeClass{

    private $counter: any;
    private $answers: any;
    private $pager: any;
    private $anotherSelector1:any;
    private $anotherSelector2:any;
    private $anotherSelector3:any;
    private $anotherSelector4:any;
    private someId: number;

    constructor(public options: any) {

        this.init(options);

    }

    private init(options) {
        //setup objects, callbacks, other init code
    }
}
} 

and I call it from my cshtml file like this:

 $(document).ready(function () {

        var instance = new MyModule.SomeClass({
            $counter: $('#something'),
            $answers: $('#something'),
            $pager: $('#something'),
            //code omitted for brevity
            someId: "@Model.SomeId",

        });


    });

It seems to me that even though this approach will result in a more clean razor view, the typescript file will still have many dependencies to the html DOM. Am I doing it right? Should I consider refactoring the html in the view as well? Also, should I move the init code in the cshtml file to the ts file as well or should I leave it like it is? I am kind of looking for best practices when doing refactorings like this.

Answer 1

I don't think you are doing it wrong :) though I understand your concern.

I think the problem you are wanting to solve is kinda like a cleaner javascript without depending on DOM selectors, it seems you actually want something like knockoutjs or angularjs which is basically some kind of templating approach. Checkout there demo's for how it is done.