2014-10-20 88 views
0

我以Kendo MVVM開始。我能夠檢索數據並在listview中顯示它們。但我正在努力解決兩個問題。Kendo Ui MVVM:無法從數據綁定檢索值

第一:如何從data-bind返回值?當我點擊行時,我正在嘗試從data-bind =「text:name」的url函數show value,但我無法弄清楚如何去做。

第二個問題:可以將字符串添加到數據綁定?或者如何實現這一目標?我想在data-bind =「text:image」之前添加「Images /」。

這是我的代碼:

<div id="container" data-model="mobileListViewModel" data-role="view" id="mobile-listview-events">   
    <ul data-role="listview" data-style="inset" data-type="group" data-template="ul-template" data-bind="source: theList"></ul>  
</div> 

<script id="ul-template" type="text/x-kendo-template"> 

    <a data-bind="click:url"><span data-bind="text:image"></span> <span data-bind="text:name"></span><span class="bubble" data-bind="text:type"></span></a>  

</script>   

    <script>  
    var crudServiceBaseUrl = "url";  
     var a = kendo.observable({ 
      theList: new kendo.data.DataSource({ 
transport: { 

       read: { 
          url: crudServiceBaseUrl + "/api/home/get", 
          dataType: "jsonp" 
         }, 
       schema: { 

        model: { 
         id: "ID_test", 
         fields: { 
          ID: { 
           editable: false, 
           nullable: false 
          }, 
          name: { 
           editable: false, 
           nullable: false 
          }, 
          map: { 
           editable: false, 
           nullable: false 
          }, 
          type: { 
           editable: false, 
           nullable: false 
          }, 
          image: 

          { 
           editable: false, 
           nullable: false, 

          }, 
          path: 
          { 
          }, 

         }  
         } 
        }  
       } 
      }), 
       url: function(e) { 
       alert(model.name); 
       }, 
     }); 

     a.set("path", "Images/"); 
     kendo.bind($("#container"), a); 

    </script> 

我這些問題了幾個小時的奮力所以我會感謝所有幫助。謝謝。

回答

2

第一:我已經修改了你的榜樣 - 點擊數據項通過e.data可

第二:它可以通過聲明屬性(見下文花例子)

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="../js/libs/jquery.min.js"></script> 
    <script src="../js/libs/kendo.all.min.js"></script> 
</head> 
<body> 
<div id="container"> 
    <div data-model="mobileListViewModel" data-role="view" id="mobile-listview-events"> 
     <ul data-role="listview" data-style="inset" data-type="group" data-template="ul-template" data-bind="source: theList"></ul> 
    </div> 
    <div data-bind="text: dep"></div> 
</div> 

<script id="ul-template" type="text/x-kendo-template"> 
    <div data-bind="click:url"> 
     <span data-bind="text:image"></span> 
     <span data-bind="text:name"></span> 
     <span class="bubble" data-bind="text:type"></span> 
    </div> 
</script> 

<script> 
    var crudServiceBaseUrl = "url"; 
    var a = kendo.observable({ 
     theList: new kendo.data.DataSource({ 
      data: [ 
       { 
        ID: 'A', 
        name: 'A', 
        map: 'A', 
        type: 'A', 
        image: 'A', 
        path: 'A' 
       }, 
       { 
        ID: 'B', 
        name: 'B', 
        map: 'B', 
        type: 'B', 
        image: 'B', 
        path: 'B' 
       } 
      ] 
     }), 
     url: function(e) { 
      alert(e.data.name); 
     }, 
     dep: function() { 
      return this.path+'flower.jpg'; 
     } 
    }); 
    a.set("path", "Images/"); 
    kendo.bind($("#container"), a); 
</script> 
</body> 
</html> 
完成作爲評估的功能
+0

非常感謝。它按我的意圖工作。 – user3573096 2014-11-19 09:25:08