1

私はルーティングとビューのために mvc 4 api をバニラ mvc 4 と組み合わせて使用​​するプロジェクトに取り組んでいます。Web api\json を使用しているため、すべてのデータ呼び出しはクライアント駆動型であり、多くの JavaScript コードを作成しています。

これを支援するために、共有されるものを処理するための 1 つのグローバル プロトタイプ JavaScript オブジェクトを作成し、ビューごとに 1 つの JavaScript ファイルを含めて、その特定のビューのすべてのクライアント側コードを処理することにしました。(私はこれが最適ではないことを知っています)

私の問題は、ビューごとの JavaScript ファイルにあります。ビューごとにプロトタイプ オブジェクトを作成する必要がありますか、それともクロージャーを使用する必要がありますか?

ビューごとのオブジェクトがない場合、傾向が見られます。通常、$(document).on('click', ..., ビュー モデルなどの $(document).ready のイベント ワイヤアップ、および多数の古いイベントが発生します。学校の機能. これらの領域をより良いものに整理する方法があるようです. SO でその方法に関するいくつかの提案を見てきましたが、jQuery のロード、イベントの接続、およびビューモデル.誰か提案や簡単な例がありますか?

これが私たちが通常最終的に終了する領域です

$(document).ready(function () {....

$(document).on('click', '.button', function(e) {.....

function FooBar(){.....
4

2 に答える 2

2

これを達成するための厳格な規則はないと思います。この猫の皮を剥ぐ方法はたくさんあります。

しかし、私がやっていることは次のとおりです。ページに対して 1 つ (または必要に応じて複数) のクロージャ オブジェクトを作成する傾向があります。$().ready() ハンドラーを含む初期化メソッドがあり、すべてのイベント ハンドラー フックアップと、発生する必要があるその他のページ グローバル初期化を行います。

このようなもの：

(function() {
    function Page() {
        var me = this;            

        // plain properties
        this.prop = "value";

        // compiled templates
        this.template = HandleBars.compile($("#template1").html());

        this.intialize =  function () {
            $().ready(function () {                    
                $("#button1").click( me.button1Click );
                $("#field1").change( me.field1Change );
            });
        };
        this.button1Click = function () {
            alert("click");
            me.doSomething();
        };
        this.field1Change = function () {
            alert("change");
        },
        this.doSomething = function (parm) {
            alert("doSomething");
        }
    }        
    var page = new Page();
    page.intialize();
})();
于 2012-09-20T02:13:52.820 に答える
0

ビューごとに1つのビューモデルを使用し、KnockoutJsまたはその他の類似したjavascriptライブラリを使用してビュー（html）にバインドする必要があります。これにより、次のようなものが得られます（最初の例から取得）。

ビュー（html）：

​<html>
    <body>
        <p>First name: <input data-bind="value: firstName" /></p>
        <p>Last name: <input data-bind="value: lastName" /></p>
        <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>       
    </body>
</html>​​​​​​​​​​​​​​

ビューモデル（javascript）：

var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);

    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
};

サーバーからデータを取得し、ビューモデルにデータを入力します（結果としてビュー）

$.get('/info/path/', function(data) {
    ko.applyBindings(new ViewModel(data.Planet, data.Earth));    
});

もちろん、最後の部分がページの最後にない場合は、document.readyまたは同様の方法で配置できます。

于 2012-09-20T03:54:36.753 に答える