1

大家好，

我刚接触剑道 ui，你可能会认为我的问题很愚蠢，但我仍然需要得到答案。

所有代码都可以在这里找到：http: //jsfiddle.net/Oleksii/vvCHX/27/

在我的场景中，我有两个视图的移动应用程序：

  • defaultView(id="") 包含 2 个列表视图：一个是静态定义的；第二个在视图初始化事件处理程序中初始化）；此非静态列表视图具有名为“fileGroupsItemTemplate”的模板。
  • 第二个视图没有内容（id="aboutView"）。

非静态视图的项目必须：

  1. 可点击（我的意思是链接项目）以获得导航到其他视图的能力；
  2. 每行右侧都有开关
  3. 只有在选中 switch 时才必须更改视图 我遇到了问题：如果我单击 switch，它会更改其值，但当前视图也会更改。

这是因为 switch 在标签内（见模板）。但如果我把它放在标签之外，

  1. 项目显示为链接；
  2. 项目变得不可点击；
  3. 如果我单击链接，则会收到错误消息：

    {"error": "请使用 POST 请求"}

有谁知道点击标签内的开关后如何防止更改视图？我正在考虑事件处理程序中的一些技巧，但首先引发了列表视图的项目单击事件，然后是切换更改。

这是模板：

<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

Please note that via your forum thread here (I assume this is you), this is not yet a supported scenario, BUT...

You can pull it off with some creativity keeping in mind that you are really circumventing the way the ListView is supposed to work and therefore you may or may not get some fringe anomalies that you have to deal with.

Here is the completed solution...

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

A few things of note:

  1. I updated your script references to the latest version of Kendo UI (2012.3.1114)
  2. Instead of using a ListView and populating it with other ListViews, I changed it so your DataSource appends the template to the DOM when the DataSource is read via the change event.
  3. As was stated in the forum thread, you cannot nest an input inside of an anchor because that is by definition malformed HTML. What you can do instead is use a span tag and give it the same classes that the anchor gets. You listen to the click event and check the e.target of the event. If it's the list item, then you can navigate to the next view. If it isn't, then you do nothing and just let the switch do its thang.

So now the initFileGroupsList function looks just so:

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 回答