2

Asp.Net MVC4 でのユーザーの選択に基づいてタブを読み込む必要があります。各タブ要素は、部分ビューに関連しています。各部分ビューには、独自の knockout.js バインディングがあります。

各タブをクリックすると、以前に選択したタブの下に部分的なビューをレンダリングする必要があります。

ここにコードスニペットがあります

<div class="row-fluid top-pad-double" id="tabBasedGrowthDiv">
  <ul class="nav nav-pills">
     <li><a href="#tabCustomerInfo" data-toggle="tab" data-bind="click:$root.AddTab">CustomerInfo</a></li>
     <li><a href="#tabPropertyInfo" data-toggle="tab" data-bind="click: $root.AddTab">PropertyInfo</a></li>
     <li><a href="#tabPropertyInfo1" data-toggle="tab" data-bind="click: $root.AddTab">PropertyInfo1</a></li>   
</ul>
<div class="tab-content pills pill-sections">
    <div data-bind="template: { name: 'tabBasedGrowthTemplate', foreach: $root.tabs}"></div>
    </div>
</div>

Knockout.js HTML テンプレート

<script type="text/html" id="tabBasedGrowthTemplate">
    <div class="tab-pane" >
        <div class="pill-header clearfix">
            <h3>Some title</h3>
                <div class="pull-right">
                    <a href="#" class="btn btn-mini" data-toggle="button" rel="tooltip" data-title="lock this section here" data-placement="top"><i class="icon-lock"></i></a>
                    <a href="#" class="btn btn-mini" rel="tooltip" data-title="close this section" data-placement="left"><i class="icon-remove"></i></a>
                </div>
        </div>
        <div class="pill-content" data-bind="attr:{id: $data.id}">

            @Html.Partial("tab based partial view name")

        </div>
    </div>
</script>

これは、ビュー モデルのおおよその実装です。

function TabBasedGrowthViewModel() {
        var self = this;

        self.tabs = ko.observableArray([TabViewModel]);
        self.AddTab = function (){}
}

ノックアウトバインディング

<script type="text/javascript">
    $(document).ready(function () {
        ko.applyBindings(new TabBasedGrowthViewModel(), $("#tabBasedGrowthDiv").get(0));
        });
</script>

上記の手順を実行すると、独自のノックアウト バインディングがあるため、部分ビューがレンダリングされるメイン ビュー モデルのノックアウト バインディングと競合します。knockout上記の小見出しに示すように、テンプレートを使用して部分ビューをレンダリングする場合にのみ、この競合が発生しますKnockout.js Html Template。

どんな助けでも大歓迎です。

前もってありがとう、Alphacoder

4

1 に答える 1

0

ページにバインドされた NavigationViewModel を使用して、表示したいビューを認識し、それを監視可能な変数に格納することで、同様のことを行いました。次に、各タブの周りで、可視テストを使用して、その変数に基づいて表示する必要があるかどうかを確認します。

次に、さまざまなビュー モデルをさまざまな部分ビューにバインドできるようにページを設定する必要があり、次を使用してこれを設定します。

// This lets us stop the view model from binding to areas of the page,
// allowing us to bind different objects to parts of the page
ko.bindingHandlers.stopBinding = {
    init: function ()
    {
        return { controlsDescendantBindings: true };
    }
};

ko.virtualElements.allowedBindings.stopBinding = true;
ko.applyBindings(navigationViewModel);

次に、部分ビューで次のコードを使用して、ナビゲーション ビュー モデルがバインドされないようにします。

    <section data-bind="visible: SelectedView() == 'location'">
        <!-- ko stopBinding: true -->        
        <div id="map"></div>
        <!-- /ko -->
    </section>

そして、次を使用して、他のモデルをこのセクションにバインドします。

        ko.applyBindings(mapViewModel, $('#map')[0]);

確かに、私はテンプレートでこれを行っていませんが、プレーンな html と js をノックアウトで使用すると機能します。

于 2013-01-30T08:58:27.423 に答える