刷新 Kendo UI viewModel

Posted 2023-05-07

【中文标题】刷新 Kendo UI viewModel

【英文标题】：Refreshing Kendo UI viewModel

【发布时间】：2013-12-27 05:14:57

【问题描述】：

我现在有一个非常简单的页面。它有一个名字输入、姓氏输入和一个添加的名字列表。您可以将您的名字和姓氏添加到文本框中，然后按添加。它添加了我拥有的 peopleList 并添加了一个带有他们名字的新 listItem。

我的问题是当我在代码中添加到 peopleList 时，它不会更新 listView。我想我需要使用 observable，但我不确定该怎么做。我的列表显示在我单击 btnMany 后添加了 25 个项目，这就是它显示的数量。

这是我的代码主体：

<!--Load Some Data-->
<div id="peopleDefaultView"
    data-role="view"
    data-model="ViewModel"
    data-layout="default">
    <!--View-->
    <input type="text" data-bind="value: firstName" id="fName" />
    <input type="text" data-bind="value: lastName" id="lName" />
    <a data-bind="click: addName" data-role="button" id="btnOne">Add</a>
    <a data-bind="click: setValues" data-role="button" id="btnMany">Add Many</a>
    <div style="margin-top: 10px">
        People List:
        <ul data-template="people-l-template" data-bind="source: peopleList" id="pList"></ul>
    </div>
</div>

<!-- Kendo Template-->
<script id="people-l-template" type="text/x-kendo-template">
    <li>
        FirstName: <span data-bind="text: first"></span>
        LastName: <span data-bind="text: last"></span>
        <a data-bind="click: removeName" data-role="button" id="btnRemoveName">X</a>
    </li>
</script>

这是我的脚本来配合它

<script>
    var ViewModel = 
        firstName: '',
        lastName: '',
        peopleList: [],
        addName:  function (e) 
            this.get("peopleList").push(
                first: this.get("firstName"),
                last: this.get("lastName"),
            );
            this.set("firstName", '');
            this.set("lastName", '');
        ,
        removeName: function (e) 
            this.set("peopleList", jQuery.grep(this.peopleList, function (item, i) 
                return (item.firstName != e.data.firstName && item.lastName != e.data.lastName);
            ));
        ,
        setValues: function (e) 
            GetValueFromServer();
        
    ;

    var GetValueFromServer = function () 
        $.ajax(
            type: "GET",
            url: "GetPeopleService.svc/GetPersonById/",
            data: ,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) 
                response.forEach(function (person) 
                    ViewModel["peopleList"].push(
                        first: person.firstName,
                        last: person.lastName
                    );
                );
                alert(ViewModel.peopleList.length);
            ,
            error: function (response) 
                console.log(response);
            
        );
    ;

    var application = new kendo.mobile.Application(document.body);
</script>

【参考方案1】：

您提供的代码存在一些问题，最明显的是您没有为<ul> 元素设置角色。您需要将其更改为具有属性data-role="listview"。您也不能使用<li> 元素作为列表视图模板的根元素（KendoUI 会自动为您处理此问题），否则在绑定列表时会出现错误。

Here's an example on JS Bin.

这是代码：

<!--Load Some Data-->
<div id="peopleDefaultView"
    data-role="view"
    data-model="viewModel"
    data-layout="flat">
    <!--View-->
    <input type="text" data-bind="value: firstName" id="fName" />
    <input type="text" data-bind="value: lastName" id="lName" />
    <a data-bind="click: addName" data-role="button" id="btnOne">Add</a>
    <div style="margin-top: 10px">
    People List:
    <ul id="pList"
        data-role="listview"
        data-template="people-l-template"
        data-bind="source: peopleList">
    </ul>
    </div>
</div>

<!-- Kendo Template-->
<script id="people-l-template" type="text/x-kendo-template">
    FirstName: <span>#:first#</span>
    LastName: <span>#:last#</span>
    <a id="btnRemoveName"
       data-role="button" 
       data-bind="click: removeName"
       data-first="#:first#" data-last="#:last#">
       X
    </a>
</script>

...

var viewModel = 
    firstName: null,
    lastName: null,
    peopleList: [],
    addName:  function (e) 
        var me = this;
        me.get('peopleList').push(
            first: me.get('firstName'),
            last: me.get('lastName')
        );
        me.set('firstName', '');
        me.set('lastName', '');
    ,
    removeName: function (e) 
        var me = this;
        me.set('peopleList', $.grep(me.peopleList, function (item, i) 
            return item.first != e.target.data('first')
                && item.last != e.target.data('last');
        ));
    
;

var application = new kendo.mobile.Application(document.body);