Kendo Ui MVVM：无法从数据绑定中检索值答案

【问题标题】：Kendo Ui MVVM: Unable to retrieve value from data-bindKendo Ui MVVM：无法从数据绑定中检索值
【发布时间】：2014-10-20 12:05:13
【问题描述】：

我从 Kendo MVVM 开始。我能够检索数据并在列表视图中显示它们。但我正在努力解决两个问题。

第一：如何从数据绑定中返回值？单击行时，我正在尝试在 url 函数中显示 data-bind="text:name" 的值，但我不知道该怎么做。

第二个问题：可以在数据绑定中添加字符串吗？或者如何实现这一点？我想在 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>

我已经为这些问题苦苦挣扎了几个小时，因此我将不胜感激。谢谢。

【问题讨论】：

标签： mvvm kendo-ui

【解决方案1】：

首先：我修改了您的示例 - 点击的数据项可通过 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>

【讨论】：