敲除只能第一次工作

Question

我在淘汰賽中遇到了一些麻煩，希望這裏的某個人能夠幫助。

我有兩個jQuery函數。其中一個使用knockout綁定到頁面上的單個元素。另一個綁定到其餘元素，然後調用第一個函數。

該數據來自返回Json的AJAX請求。

我遇到的問題是使用pGroups列表。它在第一次正常工作，但當你再次點擊它失敗並需要刷新才能再次工作。

控制檯錯誤是：NotFoundError：節點未找到

編輯：更新後的代碼，以顯示進度

jQuery的是：

//Load user data into the action window when a user is selected 
$('.ListUserLink').click(function() { 

    var url = '@Url.Action("DisplayUser", "AjaxUser")' + '?UserId=' + $(this).attr("UserId") + '&UserNum=' + $(this).attr("UserNum") + "&SectId=" + $(this).attr("Sect"); 

    $.ajax({ 
     url: url, 
     contentType: "application/json; charset=utf-8", 
     type: 'POST', 
     context: this, 
     timeout: 60000, 
     dataType: 'json', 
     tryCount: 0, 
     retryLimit: 3, 
     success: function (data) { 
      //ko.applyBindings(new UserViewModel(data)); 
      viewModel.user = new userModel(data); 
     }, 
     error: function (httpRequest, textStatus, errorThrown) { 
      alert("Error"); 
     } 
    }); 
}); 

//Load sections on department index change 
$("#ddbDepartments").change(function() { 
    var url = '@Url.Action("GetSectionsByDept", "AjaxUser")' + '?deptId=' + $(this).val(); 
    $.ajax({ 
     url: url, 
     contentType: "application/json; charset=utf-8", 
     type: 'POST', 
     context: this, 
     timeout: 60000, 
     dataType: 'json', 
     tryCount: 0, 
     retryLimit: 3, 
     success: function (data) { 
      //ko.applyBindings(new SectionViewModel(data), $(".SectionsDDB")[0]); 
      viewModel.sections = new userModel(data); 
     }, 
     error: function (httpRequest, textStatus, errorThrown) { 
      alert("Error"); 
     } 
    }); 
}); 



//Assign Section details to fields 
function sectionsModel(data) { 
    this.sectionList = ko.observableArray(data.SectionList); 
//  this.sections = this.sectionList; 
//  this.selectedItem = parseInt($("#OldSectionId").value); 
}; 

//Assign user details to fields 
function userModel(data) { 

    this.fullName = ko.observable(data.FirstName + " " + data.Surname); 

    this.firstName = ko.observable(data.FirstName); 
    this.surname = ko.observable(data.Surname); 
    this.usernum = ko.observable(data.UserNum); 

    //Assign JobTitle Dropdown and selected value 
    this.jobTitlesList = ko.observableArray(data.TitlesList); 
    this.jobTitles = this.jobTitlesList; 
    this.selectedItem = data.JobTitleNum; 

    //Assign Group/Application list 
    this.pGroups = ko.observableArray(data.GroupList); 

    this.sections = ko.observableArray([{}]); 

    this.ext = ko.observable(data.Ext); 
    this.userId = ko.observable(data.UserId); 
    this.olduserid = ko.observable(data.UserId); 
    $("#ddbDepartments").val(data.DeptId); 
    this.oldsectionid = ko.observable(data.SectionId); 
    $("#ddbDepartments").change(); 
    this.oldsectionid = ko.observable(data.SectionId); 
    //$("#SectionsDDB").val(data.SectionId); 
}; 

var wrapper = function() { 
    this.user = new userModel(userdata); 
    this.sections = new sectionsModel(sectiondata); 
}; 

var viewModel = new wrapper(); 
    ko.applyBindings(viewModel); 

的pGroups HTML這是在第二失敗嘗試是：

<div data-bind="with: user" id="ActionWindow"> 

<form action="@Url.Action("SaveUserDetails", "AJAXUser")" method="post" class="AjaxSubmit" id="userDetailsForm"> 
    <h2>User: <span data-bind="text: fullName"></span></h2> 
    <table> 
     <tr> 
      <td>First Name:</td> 
      <td><input type="text" name="FirstName" id="FirstName" data-bind="value: firstName" /></td> 
      <td> 
       <input type="hidden" name="UserNum" id="UserNum" data-bind="value: usernum" /> 
       <input type="hidden" name="OldUserId" id="OldUserId" data-bind="value: olduserid" /> 
       <input type="hidden" name="OldSectionId" id="OldSectionId" data-bind="value: oldsectionid" /> 
      </td> 
      <td></td> 
     </tr> 

     <tr> 
      <td>Surname:</td> 
      <td><input type="text" name="Surname" id="Surname" data-bind="value: surname" /></td> 
      <td></td> 
      <td></td> 
     </tr> 

     <tr> 
      <td>Job Title:</td> 
      <td><select name="JobTitleNum" id="TitlesList" data-bind="options: jobTitles, optionsValue: 'TitleId', optionsText: 'Title', value: selectedItem"></select></td> 
      <td></td> 
      <td></td> 
     </tr> 

     <tr> 
      <td>Extension:</td> 
      <td><input type="text" name="Ext" id="Ext" data-bind="value: ext" /></td> 
      <td></td> 
      <td></td> 
     </tr> 

     <tr> 
      <td>Login ID:</td> 
      <td><input type="text" name="UserId" id="UserId" data-bind="value: userId" /></td> 
      <td></td> 
      <td></td> 
     </tr> 

     <tr> 
      <td>Department:</td> 
      <td> 
       <select id="ddbDepartments" name="DeptId"> 
        @foreach (var d in Model.DepartmentList) 
        { 
         <option value="@d.DeptId">@d.DeptName</option> 
        } 
       </select> 
      </td> 
      <td>Section: </td> 
      <td> 
       <select name="SectionId" class="SectionsDDB" data-bind="options: $root.sections.list, optionsValue: 'SectId', optionsText: 'SectName', value: SectionId"></select> 
       @*<select name="SectionId" class="SectionsDDB" data-bind="options: sections, optionsValue: 'SectId', optionsText: 'SectName', value: selectedItem"></select>*@ 
      </td> 
     </tr> 
    </table> 
    <input type="submit" value="Update User" /> 
    <br /> 
</form> 

<h2>Current Groups</h2> 
<table> 
    <tbody data-bind="foreach: pGroups"> 
     <tr> 
      <td data-bind="text:AppName"></td> 
      <td data-bind="text:GroupName"></td> 
     </tr> 
    </tbody> 
</table> 

其他所有工作。

我發現這一點：http://knockoutjs.com/documentation/plugins-mapping.html

這表明我應該是這樣的映射：

var viewModel = ko.mapping.fromJS(data, mapping); 

但嘗試，因爲我可能我無法弄清楚如何將其應用到我的代碼。

任何幫助將不勝感激。

Answer 1

基於我在以前的評論中提供的鏈接（http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html）我做你的可能視圖模型的一個例子：

//the overall model 
var wrapper = function() { 
    this.user = ko.observable(); 
    this.user(new userModel(userdata)); 
    this.sections = new sectionsModel(sectiondata); 
}; 
var viewModel = new wrapper(); 
ko.applyBindings(viewModel); 

然後在$（「 ListUserLink」）成功點擊你可以有：

viewModel.user(new UserViewModel(data)); 

而且在$（ 「＃ddbDepartments」）的成功改變，你可以有：

viewModel.sections.sectionList(data.SectionList); 

在視圖中，可以使用與$根一起綁定來綁定一個嵌套的視圖模型：

<div data-bind="with: user"> 
     <h2>User: <span data-bind="text: fullName"></span></h2> 
     ... 
     <select name="SectionId" class="SectionsDDB" data-bind="options: $root.sections.sectionList, optionsValue: 'SectId', optionsText: 'SectName', value: $root.sections.selectedValue"></select> 
     ... 
    </div> 

Answer 2

據我所知，這些部分是根據部門選擇加載的。那麼，爲什麼你不只是添加sectionList observableArray到UserViewModel，只是添加訂閱部門ID，所以每次的變化部門，部分列表加載：

this.DeptId = ko.observable(data.DeptId); 
this.sectionList = ko.observableArray(GetSections(this.DeptId())); 
this.DeptId.subscribe(function() { 
       var newSections = GetSections(this.DeptId()); 
       this.sectionList(newSections); 
      }, this); 

GetSections功能應該叫你GetSectionsByDept方法。 在你的jsfiddle，如果你發表意見follwing線，數據將加載：

$("#ddbDepartments").val(data.DeptId); 
$("#ddbDepartments").change(); 
$("#SectionsDDB").val(data.SectionId); 

你也應該更換這個下拉列表部門：

<select name="DeptId" id="ddbDepartments" data-bind="options: DepartmentList, optionsValue: 'Id', optionsText: 'DeptName', value: DeptId"></select> 

但要確保有部門的數組具有Id/DeptName屬性的對象。

Answer 3

你不需要實例一個新的ViewModel總是你有一個Ajax服務器響應。 您可以在頁面準備就緒時應用綁定，並在ajax完成時更新數據更改，或者您可以刪除viewmodel綁定並再次應用到您的ajax中。