4

MVC3 アプリで同じツリー スライドを実装しようとしていますが、それが正しいかどうか完全にはわかりません。

インデックスページ:

<script type="text/javascript">
    $(document).ready(function () {
        $('#slider a').click(function () {
            history.pushState({ path: this.path }, '', this.href);
            $.get(this.href, function (data) {
                $('#slider').slideTo(data);
            });
            return false;
        });
    });
</script>

@{Html.RenderAction("MainTableTracker", "Release", new { releaseId = Model });}

MainTableTracker 部分ビュー:

<script type="text/javascript">
    $(document).ready(function () {
        $('#slider a').click(function () {
            history.pushState({ path: this.path }, '', this.href);
            $.get(this.href, function (data) {
                $('#slider').slideTo(data);
            });
            return false;
        });
    });
</script>

<div id="slider">
    @Html.RouteLink(Model.Brand.Name, "Brand", new { BrandId = Model.Brand.Id }) /
    <ul>
        <li><a href="#">Overview</a></li>
        @foreach(var model in Model.ModelExts)
        {
            <li>@Html.RouteLink(model.Model.Name, new { modelId = model.Model.Id })</li>
        }
    </ul>
</div>

VersionTable 部分ビュー:

<script type="text/javascript">
    $(document).ready(function () {
        $('#slider a').click(function () {
            history.pushState({ path: this.path }, '', this.href);
            $.get(this.href, function (data) {
                $('#slider').slideTo(data);
            });
            return false;
        });
    });
</script>


<div id="slider">
    @Html.RouteLink(Model.Brand.Name, "Brand", new { BrandId = Model.Brand.Id }) / @Html.RouteLink(Model.Name, "Model", new { modelId = Model.Id }) /
    <ul>
        <li><a href="#">Overview</a></li>
        @foreach(var model in Model.Brand.Model)
        {
            <li>@Html.RouteLink(model.Name, new { modelId = model.Id })</li>
        }
    </ul>

    <div class="versionWraper">
        @foreach(var version in Model.Version)
        {
            <div>
                @version.Name
            </div>
        }
    </div>
</div>

これは機能しますが、間違っていると確信しています.3つの異なるビューが親ビューのコードを毎回コピーするべきではないと思います。

ビューモデルを 1 つとアクションを 1 つだけにして、毎回何を表示するかをビューに決定させるべきかどうか疑問に思っています。しかし、1 つのアクションだけを使用してさまざまなタイプのデータ (リリース、ブランド、機能) を表示するのはあまりよろしくありません。

また、レイアウトには次のものがあります。

 $(window).bind('popstate', function (e) {
        $.get(e.originalEvent.state.path, function (data) {
            $('#slider').slideTo(data);
        });
    });

それは機能しますが、ブランド レベルに戻ると、すべてのスクリプトがリロードされます (これは、デフォルトのパーシャルではなくビューであるためです)。

これを実装するより良い方法はありますか？

ありがとう

4

1 に答える 1

2

このようなものを設計するときは、オブジェクトを ID でターゲットにしないことをお勧めします。スクリプトが起動する前にアイテムがページ上にあることを保証したい場合など、部分的な読み込みなどを処理するときに本質的に問題になる可能性があるような、奇妙な状況に陥ります。

代わりに、次のようなアプローチを検討してください。

<style>
    .slider { /* Styles here */ }
    .slider > ul { /* Styles here */ }
    .slider > ul > li { /* Styles here */ }
    .slider > .versionWrapper { /* Styles here */ }
    .slider > .versionWrapper > .versionName { /* Styles here */ }
</style>

<div class="slider">
    @Html.RouteLink(Model.Brand.Name, "Brand", new { BrandId = Model.Brand.Id })
    / @Html.RouteLink(Model.Name, "Model", new { modelId = Model.Id }) /
    <ul>
     <li><a href="#">Overview</a></li>

    @foreach(var model in Model.Brand.Model) {
     <li>@Html.RouteLink(model.Name, new { modelId = model.Id })</li>
    }

    </ul>
    <div class="versionWrapper">

    @foreach(var version in Model.Version) {
     <div class="versionName">@version.Name</div>
    }

    </div>
</div>

<script type="text/javascript" language="javascript">
$(document).ready(function () {
    $('.slider > ul > li > a').live('click', function (ev) {
        ev.preventDefault();
        ev.stopPropagation();

        var $a = $(ev.target);
        var $slider = $a.closest('.slider');

        history.pushState({ path: $a.path }, '', $a.href);
        $.get($a.href, function (data) {
            $slider.slideTo(data);
        });
    });
});
</script>

この時点で、ラップされているパーシャルに関係なく、ページに配置したすべてのスライダーを効果的にターゲットにしています。最後の少量の jQuery ロジックは、サイト全体またはページ全体の JS ファイルに簡単に配置できます。 、HTML を出力する特定の実装から切り離されます。

次に、現在のモードのトグルを作成するだけです。私は でこれを行うViewData["SettingName"]のが好きですが、それは私だけです。

「MainTable」スタイルのビューを表示する場合は、次のように設定します。

ViewData["Mode"] = "Default";

「バージョン」スタイル ビューを表示する場合は、次のように設定します。

ViewData["Mode"] = "Version";

次に、パーシャルを次のようにレンダリングするように変更します。

<div class="slider">
@{
    bool versionMode = (ViewData["Mode"] as String == "Version");

    string breadCrumb = Html.RouteLink(
        Model.Brand.Name, 
        "Brand", 
        new { BrandId = Model.Brand.Id }
    ).ToString();

    if (versionMode) {
        breadCrumb = String.Format("{0} / {1}", 
            breadCrumb, 
            Html.RouteLink(
                Model.Name, 
                "Model", 
                new { modelId = Model.Id }
            ).ToString()
        );
    }
}

    @breadCrumb /
    <ul>
        <li><a href="#">Overview</a></li>
@{
    if (versionMode)
        foreach(var model in Model.ModelExts) {

        <li>@Html.RouteLink(model.Model.Name, new { modelId = model.Model.Id })</li>

        }
    } else {

        @foreach(var model in Model.Brand.Model) {
            <li>@Html.RouteLink(model.Name, new { modelId = model.Id })</li>
        }

    }
}
    </ul>

@{
    if (versionMode) {

    <div class="versionWrapper">
        @foreach(var version in Model.Version) {
        <div>@version.Name</div>
        }
    </div>

    }
}

</div>
于 2012-08-08T17:56:25.140 に答える