Question

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

首先：如何从data-bind返回值？当点击第一行时，尝试在url函数中显示来自data-bind =＆＃34; text：name＆＃34;但我无法弄清楚如何去做。

第二个问题：可以在data-bind中添加字符串吗？或者如何实现这一目标？我想添加＆＃34; Images /＆＃34;在data-bind =＆＃34; text：image＆＃34;。

之前

这是我的代码：

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

我在这些问题上挣扎了好几个小时，所以我将不胜感激。感谢。

Answer 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>

Kendo Ui MVVM：无法从data-bind中检索值

1 个答案: