KendoUI Mobile ListView/MVVM “对象 #<Text> 没有方法 'getAttribute'答案

【问题标题】：KendoUI Mobile ListView/MVVM "Object #<Text> has no method 'getAttribute'KendoUI Mobile ListView/MVVM “对象 #<Text> 没有方法 'getAttribute'
【发布时间】：2013-11-27 19:12:23
【问题描述】：

我正在尝试让 MVVM 与 KendoUI Mobile 一起工作，但收到错误消息，“对象 # 没有方法 'getAttribute'”

绑定似乎可以正常工作，但是页面的渲染非常混乱。例如，我确实看到了一个带有 #:linkText # 的项目列表，这是我所期望的，除了视图不再看起来像 iPhone，链接不起作用，还有其他一些奇怪的样式发生

无论如何，我有一个视图和模板，如下所示：

<div data-role="view" id="home-view" data-layout="default" data-title="Hello World!"
  data-init="app.views.home.init"
  data-before-show="app.views.home.beforeShow"
  data-show="app.views.home.show"
  data-model="app.views.home.viewModel"> 

  <ul data-role="listview" data-bind="source: navigation" data-template="navigation-template"></ul>
</div>

<script id="navigation-template" type="text/x-kendo-template">
  <li>
    <a href="#: url #">#: linkText #</a>
  </li>
</script>

还有 javascript，像这样（使用 require）：

define(["kendo"], function (kendo) {
  return {
    init: function (initEvt) {

    },
    beforeShow: function (beforeshowEvt) {

    },
    show: function (showEvt) {

    },
    viewModel: kendo.observable({
        navigation: [
            {
                linkText: 'My Data',
                url: 'myData'
            },
            {
                linkText: 'My Purchase Requests',
                url: 'myPurchaseRequests'
            },
            {
                linkText: 'My Purchase Orders',
                url: 'myPurchaseOrders'
            },
            {
                linkText: 'Pending PR Tasks',
                url: 'pendingPrTasks'
            },
            {
                linkText: 'Pending PO Tasks',
                url: 'pendingPoTasks'
            }
        ]
    })
  }
});

【问题讨论】：

标签： javascript mvvm kendo-ui kendo-mobile

【解决方案1】：

@Tom，试试这个。

<a href="\#: url #">#: linkText #</a>

在href 中的#(hash) 之前使用正斜杠('\')。它会很好用。

【讨论】：

问题实际上是 Kendo 框架自动创建了 <li> 和 </li> 元素，所以只需删除这些元素并将模板保留为 `# : linkText # 解决了这个问题。

【解决方案2】：

KendoUI Mobile 框架自动为data-role="listview" 创建<li> 和</li> 元素；因此，从模板中删除这些并保留模板如下将解决问题：

<script id="navigation-template" type="text/x-kendo-template">
    <a href="#: url #">#: linkText #</a>
</script>

【讨论】：