1

こんにちは、みんな、

私は剣道UIを始めたばかりで、私の質問はばかげていると思うかもしれませんが、それでも答えを得る必要があります.

すべてのコードはこちらから入手できます: http://jsfiddle.net/Oleksii/vvCHX/27/

私のシナリオでは、2 つのビューを持つモバイル アプリケーションがあります。

  • defaultView (id="") には 2 つのリスト ビューが含まれています。1 つは静的に定義されています。2 つ目はビューの初期化イベント ハンドラで初期化されます); この非静的リストビューには、「fileGroupsItemTemplate」というテンプレートがあります。
  • 2 番目のビューにはコンテンツがありません (id="aboutView")。

非静的ビューのアイテムは:

  1. 他のビューに移動する機能を取得するためにクリック可能 (つまり、リンク アイテム) にする。
  2. すべての列の右側にスイッチがあります
  3. スイッチがチェックされている場合にのみビューを変更する必要があります。問題に直面しました。スイッチをクリックすると値が変更されますが、現在のビューも変更されます。

これは、switch がタグ内にあるためです (テンプレートを参照)。でも、タグを外したら、

  1. アイテムはリンクとして表示されます。
  2. アイテムをクリックできなくなります。
  3. リンクをクリックすると、エラーが発生します。

    {"エラー": "POST リクエストを使用してください"}

タグ内のスイッチをクリックした後にビューが変更されないようにする方法を知っている人はいますか? イベントハンドラーで何か工夫を考えていたのですが、そもそもリストビューのitem-clickイベントが発生し、直後にswitch-changeが発生してしまいます。

テンプレートは次のとおりです。

<script id="fileGroupsItemTemplate" type="text/x-kendo-template">
<table>
    <tr><td>
        <img src="#= data.Image#" />
    </td><td style="vertical-align: middle">
        #= data.Name #
    </td>
    </tr>
</table>
#if(data.Docs.length > 0){#
<ul>
    #for(var i=0; i < data.Docs.length; i++){#
    <li>
        <a >#=data.Docs[i].Name#
        <input data-on-label="Cl" data-off-label="Sk" data-role="switch" #=data.Docs[i].NeedProcess ? "checked='checked'" : ""# /></a>

    </li>
    #}#
</ul>
#}#

4

1 に答える 1

0

ここのフォーラム スレッド(私はこれがあなただと思います) を介して、これはまだサポートされていないシナリオであることに注意してください。

ListView が機能するはずの方法を実際に回避しているため、対処しなければならないフリンジ異常が発生する場合と発生しない場合があることを念頭に置いて、創造性を働かせてそれをやってのけることができます。

これが完成したソリューションです...

http://jsfiddle.net/vvCHX/30/

いくつかの注意事項:

  1. スクリプト参照を Kendo UI の最新バージョン (2012.3.1114) に更新しました。
  2. ListView を使用して他の ListView を設定する代わりに、変更イベントを介して DataSource が読み取られるときに DataSource がテンプレートを DOM に追加するように変更しました。
  3. フォーラム スレッドで述べられているように、アンカー内に入力をネストすることはできません。これは、定義上、不正な HTML であるためです。代わりにできることは、span タグを使用して、アンカーが取得するのと同じクラスを与えることです。クリック イベントをリッスンし、イベントの e.target を確認します。リスト アイテムの場合は、次のビューに移動できます。そうでない場合は、何もせず、スイッチに感謝をさせます。

したがって、initFileGroupsList関数は次のようになります。

function initFileGroupsList(e) {
  // compile the template    
  var template = kendo.template($("#fileGroupsItemTemplate").html());

  // create a new datasource
  var fileGropsRemoteDS = new kendo.data.DataSource({
    data: [{"__type":"JsonFileTypeGroup:#" .... }],
    change: function() {

      // the 'change' function is called when the datasource reads

      // replace the 'dynamic' plaholder div with the output of the template
      $("#dynamic").replaceWith(kendo.render(template, this.view()));

      // create the listview widgets
      $(".listview").kendoMobileListView({
        style: "inset",
        click: function(e) {
          // when the listview is clicked, get the item that was actually 
          // clicked in the DOM and wrap it in jqueries
          var item = $(e.target);

          // if the item has the 'clickable' class..
          if (item.hasClass("clickable")) {
            // set its style to highlight the item blue
            item.addClass("km-state-active");

            // navigate to the next view
             app.navigate("#aboutView");        
          }
        }
      });
    $(".switch").kendoMobileSwitch();
  }
});
于 2013-01-02T20:11:41.767 に答える