将剃刀视图内联 javascript 移动到外部打字稿文件答案

【问题标题】：move razor view inline javascript to external typescript file将剃刀视图内联 javascript 移动到外部打字稿文件
【发布时间】：2014-09-12 08:16:56
【问题描述】：

我有一个带有内联 javascript 的剃刀视图，随着时间的推移变得混乱，现在我将所有 js（除了一些最小的初始化代码）移动到外部打字稿文件。让 js 代码可重用会很好，但它非常特定于这个特定的视图。 js 代码很大程度上依赖于许多 html 元素。我所拥有的是这样的：

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
    }
}
}

我从我的 cshtml 文件中这样调用它：

 $(document).ready(function () {

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

        });


    });

在我看来，即使这种方法会产生更干净的剃须刀视图，打字稿文件仍然对 html DOM 有很多依赖。我做对了吗？我是否也应该考虑重构视图中的 html？另外，我应该将 cshtml 文件中的初始化代码也移动到 ts 文件中，还是应该保持原样？在进行这样的重构时，我正在寻找最佳实践。

【问题讨论】：

标签： javascript asp.net-mvc razor refactoring typescript

【解决方案1】：

我不认为你做错了 :) 虽然我理解你的担心。

我认为你想要解决的问题有点像一个更干净的 javascript，而不依赖于 DOM 选择器，看起来你实际上想要像 knockoutjs 或 angularjs 这样的东西，这基本上是某种模板方法。查看那里的演示以了解它是如何完成的。

【讨论】：