刷新Kendo UI viewModel

Question

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

我的问题是当我添加到我的代码中的peopleList，它不更新listView。我想我需要使用可观察的，但我不确定如何去做。我的列表显示，在点击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> 

Answer 1

有几件事情错了，你提供的代码，最值得注意的是，你没有为你的<ul>元素设置角色。您需要将其更改为具有属性data-role="listview"。您也不能使用<li>元素作为listview模板的根元素（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);