2013-12-09 138 views
2

我現在有一個非常簡單的頁面。它有名字輸入,姓氏輸入和添加的名字列表。您可以將第一個和最後一個名稱添加到文本框中,然後按添加。它爲我添加的peopleList添加了一個新的listItem和他們的名字。刷新Kendo UI viewModel

我的問題是當我添加到我的代碼中的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> 

回答

0

有幾件事情錯了,你提供的代碼,最值得注意的是,你沒有爲你的<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);