0

Webページに動的表示を作成しようとしています。このサイトはASP.NETMVC3で構築されていますが、これが重要かどうかはわかりません...

基本的に、ベースの「_Editor.cshtml」ページがあり、パーシャルを使用して、クエリパラメーターを使用してディスプレイ内の特定のエディターコンテンツをレンダリングします。グラフ（折れ線グラフと棒グラフ）のエディターについて考えてみます。

_Editor.cshtml

<div id='tabs'>
  <ul> 
    <li><a href='#queryTab'>Define Query</a></li>

    <!-- THIS IS WHERE I NEED TO SHOW ALL OF MY 'CUSTOM' TAB NAMES -->
    <!-- ko template: 'tabNames' -->
    <!-- /ko -->

    <li><a href='#themeTab'>Styles and Themes</a></li>
  </ul>
  <div id='queryTab'>
    <!-- configure db connection, tables, fields, etc... (not important) -->
  </div>

  <!-- THIS IS WHERE I WANT TO SHOW CONTENT FOR MY CUSTOM TABS -->
  <!-- ko template: 'tabContent' -->
  <!-- /ko -->

  <div id='themeTab'>
    <!-- show various style options here (not important) -->
  </div>

</div>

<script type="text/javascript">
  $(function(){
    var vm = { /* define my model here */ };
    ko.applyBindings(vm);

    $("#tabs").tabs();
  });
</script>

@if (Model.EditorType == ChartTypes.Bar) {
  @Html.Partial("_BarChartEditor")

} else if (Model.EditorType == ChartTypes.Line) {
  @Html.Partial("_LineChartEditor")

}

_BarChartEditor.cshtml

<script id="tabNames" type="text/html">
  <li><a href="#barChartTab">Bar Chart Tab!</a></li>
  <!-- I could have many more tab names here -->
</script>

<script id="tabContent" type="text/html">
  <div id="barChartTab">
    <h1>Add controls for bar chart configuration</h1>
  </div>
  <!-- I would create a div for each tab name above here -->
</script>

_LineChartEditor.cshtml

<script id="tabNames" type="text/html">
  <li><a href="#lineChartTab">Line Chart Tab!</a></li>
</script>

<script id="tabContent" type="text/html">
  <div id="lineChartTab">
    <h1>Add controls for line chart configurations</h1>
  </div>
</script>

長いコードドロップでごめんなさい（ここにすべてを書くのに長い時間がかかったので、私を憐れんでください）。:)カスタムパーシャルを使用してエディターを構築する方法のために、問題が理解されていることを確認したかったのです。おそらくそれは不器用ですが、それはほとんどの部分で機能します...

実際、タブのコンテンツを除いて、すべてがうまく機能します。ビューモデルをUIにバインドする前に、タブのレンダリングが行われているように見えます。'ko.applyBindings（）'メソッドが呼び出されると、タブはさまざまなタブに表示されます。

誰かがこれをやろうとしましたか？誰かが成功しましたか？私が話していることを正確に示すための簡単なシナリオを示すために、jsfiddleを作成しました。

http://jsfiddle.net/TrailHacker/j2nhm/

助けてくれてありがとう！

4

1 に答える 1

2

私は実際にあなたの例でそれを動作させました、あなたのコンテンツテンプレートはちょうど間違って構成されていました。<div>タグがありませんでした。

例としてこれを変更する場合は、dividがリンクの参照と一致する必要があることに注意してください。これらの値の両方をビューモデルにスローして、複数のカスタムタブを使用できるようにすることができます。

http://jsfiddle.net/tyrsius/UCGRZ/

于 2012-04-30T23:34:50.693 に答える