Question

我遇到了问题但无法解决。也许somobody会帮助我解决这个问题。

我有MVC局部视图，其中包含AJAX分页表。

<div id="mainTable">

    @using (Ajax.BeginForm("OrganizationMemberList", "Team", new AjaxOptions()
    {
        InsertionMode = InsertionMode.ReplaceWith,
        UpdateTargetId = "mainTable",
        HttpMethod = "POST",
        Url = @Url.Action("OrganizationMemberList", "Team")
    }))
    {
        <div class="widget">
            <div class="widget-body">
                <div class="table-responsive">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-btn">
                                <button type="submit" class="btn btn-primary">@ResourceMain.Search</button>
                            </span>
                            @Html.TextBoxFor(x => x.SearchString, new { @class = "form-control", @autocomplete = "off" })
                        </div>
                    </div>
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>@Html.DisplayNameFor(x => x.Source.FirstOrDefault().Name)</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach (var employee in Model.Source)
                        {
                            <tr>
                                <td class="hidden">
                                    @employee.Upn
                                </td>
                                <td>
                                    @employee.Name
                                </td>
                                <td>
                                    <i class="pointerSelect glyphicon glyphicon-plus" data-bind="click: function(name, upn){ AddUser('@employee.Name', '@employee.Upn' ) }"></i>
                                </td>
                                <td>
                                    <i class="pointerSelect glyphicon glyphicon-king" data-bind="click: function(name, upn){ AddLeader('@employee.Name', '@employee.Upn' ) }"></i>
                                </td>
                            </tr>
                        }
                        </tbody>
                    </table>
                    @Html.Pagination(Model, "OrganizationMemberList", "mainTable")
                </div>
            </div>
        </div>
    }
</div>

我在<i>标签上有点击绑定。当主页加载此部分时，一切正常。在表重新加载绑定不起作用后更改页面时出现问题。我的主页：

<div class="row">
    <div id="something" class="col-md-3">
        @Html.Action("OrganizationMemberList", "Team")
    </div>
    <div class="col-md-9">
        <div class="widget">
            <div class="widget-body">
                @using (Html.BeginForm(null,null,null,FormMethod.Post, new {@class = "form-horizontal" }))
                {
                    @Html.AntiForgeryToken()
                    <div class="form-group">
                        @Html.LabelFor(x => x.Name)
                        @Html.ValidationMessageFor(x => x.Name)
                        @Html.TextBoxFor(x => x.Name, new {@class = "form-control"})
                    </div>
                    <div class="form-group">
                        @Html.LabelFor(x => x.Leader)
                        <i class="glyphicon glyphicon-king"></i>
                        <div data-bind="with: team">

                            <div style="max-width: 160px;" class="input-group">
                                <div class="input-group-addon">
                                    <span data-bind="text: Leader().FullName"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">

                        @Html.LabelFor(x => x.User)
                        <i class="glyphicon glyphicon-user"></i>
                        <div data-bind="foreach: users">

                            <div style="max-width: 160px;" class="input-group">
                                <div class="input-group-addon">
                                    <span data-bind="text: FullName"></span>
                                </div>
                                <div class="input-group-addon">
                                    <i class="pointerSelect glyphicon glyphicon-remove" data-bind="click: $root.RemoveUser"></i>
                                </div>
                            </div>


                        </div>
                    </div>
                }
            </div>
        </div>
    </div>
</div>
<script src="~/Scripts/models/TeamViewModel.js"></script>

我的Knock ViewModel看起来像这样：

$(function() {
    var teamModel = function(team) {
        var self = this;
        self.id = ko.observable(team ? team.Id : 0);
        self.User = ko.observableArray(team ? team.User : []);
        self.Name = ko.observable(team ? team.Name : "");
        self.Leader = ko.observable(team ? team.Leader : "");
    };

    var userModel = function (user) {
        var self = this;
        self.Id = ko.observable(user ? user.Id : 0);
        self.FullName = ko.observable(user ? user.FullName : "");
        self.UserUpn = ko.observable(user ? user.UserUpn : "");
    };
    var teamManagement = function() {
        var self = this;
        self.team = ko.observable(new teamModel());
        self.users = ko.observableArray([]);

        self.AddUser = function (name, upn) {
            var user = { FullName: name, UserUpn: upn };
            var obj = new userModel(user);
            self.users.push(obj);
        };
        self.RemoveUser = function (user) {
            self.users.remove(user);
        };
        self.AddLeader = function (name, upn) {
            var user = { FullName: name, UserUpn: upn };
            var obj = new userModel(user);
            self.team().Leader(obj);
        };
    };

    ko.applyBindings(new teamManagement());
});

有人有线索吗？

Answer 1

所以我对我的questuin做了一个研究，我带来了这种解决方案。

首先，我需要将 teamManagement viewModel拆分为两个viewModel。一个负责PartialView绑定，另一个负责主页绑定。因此创建了具有AddUser和AddLeader功能的 partialViewTable viewModel。

然后我将Id添加到加载PartialView的容器中。我将其称为 PartialContainer ，并将ID添加到我称之为 MainPageContainer 的主页面。

在JS文件中我像这样applyBindings：

ko.applyBindings(new teamManagement(), document.getElementById("MainPageContainer"));
ko.applyBindings(new partialViewTable(), document.getElementById("PartialContainer"));

还为Ajax.Begin表单创建了onSuccess函数。

function applyBinding() {
    ko.cleanNode($("body")[0]);
    ko.applyBindings(new partialViewTable(), document.getElementById("something"));
};

现在，当您通过Ajax重新加载partialView时，它将清除旧绑定并将新绑定应用于新内容。

使用Ajax表敲除JS绑定

1 个答案: