淘汰赛只适用于第一次

Question

我在淘汰赛方面遇到了一些麻烦，希望这里有人能提供帮助。

我有两个 jQuery 函数。一个，使用敲除，绑定到页面上的单个元素。另一个绑定到其余元素，然后调用第一个函数。

数据取自返回 Json 的 AJAX 请求。

我遇到的问题是与 pGroups 列表有关。它第一次运行良好，但是当您再次单击时它会失败并且需要刷新才能再次运行。

控制台错误是：NotFoundError: Node was not found

编辑：更新代码以显示进度

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').click就可以有：

viewModel.user(new UserViewModel(data));

并且在 $("#ddbDepartments").change 的成功中你可以拥有：

viewModel.sections.sectionList(data.SectionList);

在视图中，您可以使用 with 绑定和 $root 来绑定嵌套的视图模型：

  <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 中，如果您注释以下行，数据将加载：

$("#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 完成时更新数据更改，或者您可以删除视图模型绑定并在您的 ajax 中再次应用。