Question

我正在使用自动完成功能将名称添加到表行的动态列表中。当我添加一个新名称时，会创建一个新行，但不会更新searchText和searchId。删除链接似乎工作。所以我的观点看起来像;

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<SHP.Models.TrainingListEmployeesViewModel>" %>
<%@ Import Namespace="System.Web.Script.Serialization" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Bulk Training
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<form class="employeeListEditor">
    <h3>Allocate or cancel training for the selected employees</h3>
    <table>
        <tr>
            <td style="text-align: right;">Course Name</td>
            <td><%: Html.EditorFor(model => model.TrainingName) %></td>
        </tr>
        <tr>
            <td style="text-align: right;">Description (optional)</td>
            <td><%: Html.TextAreaFor(
               model => model.TrainingDescription, new { maxlength = "255", style = "width:400px;height:100px;" }) %></td>
        </tr>
    </table>
    <%: Html.EditorFor(model => model.ClientEmployeeSelector) %>
    <button data-bind="click: addEmployee">Add</button>
    <%--<input type="hidden" name="numberOfEmployees" id="numberOfEmployees" value="<%:Model.EmployeeList.Count %>" />--%>
    <div id="displayEmployees" style="margin-top:10px;display: block">
        <table id="employeeDataTable" class="groupBorder">
            <thead>
                <tr>
                    <th></th>
                    <th>Employee</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: employees">
                <tr>
                    <td>
                        <a href="#" data-bind="click: $parent.removeEmployee">Remove</a>
                        <input type="hidden" data-bind="value: searchId"/>
                    </td>
                    <td><span data-bind="text: searchText"></span></td>
                </tr>               
            </tbody>
        </table>
    </div>
</form>

    <script type="text/javascript">
        function Employee(id, text) {
            var self = this;
            self.searchId = id;
            self.searchText = text;
        }

        var initialData = <%= new JavaScriptSerializer().Serialize(Model) %>;
        function ViewModel() {
            var self = this;
            self.employees = ko.observableArray(initialData.EmployeeList);
            self.searchText = ko.observable(initialData.SearchText);
            self.searchId = ko.observable(initialData.SearchTextId);
            self.removeEmployee = function(employee) {
                self.employees.remove(employee);
            };
            self.addEmployee = function() {
                self.employees.push(new Employee(self.searchId, self.searchText));
                $('#SearchText').val('');
            };
            self.save = function() {
                ko.utils.postJson(location.href, { employees: self.employees });
            };
        }
        ko.applyBindings(new ViewModel());
    </script>
</asp:Content>

当我单击添加按钮（我希望在工作时删除它以便返回键触发add事件）时，会将以下行添加到表中;

<tbody data-bind="foreach: employees">
                <tr>
                    <td>
                        <a href="#" data-bind="click: $parent.removeEmployee">Remove</a>
                        <input type="hidden" data-bind="value: searchId" value=""/>
                    </td>
                    <td><span data-bind="text: searchText"/></td>
                </tr>               
            </tbody>

因此显示删除链接正确，它也可以正常工作。但是没有设置searchId和searchText。我做错了什么？

Answer 1

当您的代码调用new Employee(self.searchId, self.searchText)时，您将传递2个observable作为参数。也就是说，你自己传递了观察者，不他们的价值观。因此，新员工的属性将仅仅是对主要2个可观察对象的引用。这可能不是你想要的。

您应该传递observable的值（而不是observable本身），如下所示：new Employee(self.searchId(), self.searchText())。这样，每个新员工都将获得2个主要观察值的当前值的副本。

此外，在许多情况下，让Employee的属性本身是可观察的（例如，如果它们可以改变）是有用的。

这是一个表示：http://jsfiddle.net/antishok/KXhem/73/

的小提琴

编辑：根据海报的评论更新小提琴，并提供更多信息：http://jsfiddle.net/antishok/KXhem/74/

Answer 2

我不知道这是不是最好的答案，但是我相信antishok可以帮助我。实际的JSON数据存储如下;

{"EmployeeList":[],"ClientEmployeeSelector":{"SearchText":null,"SearchTextId":0},"Cvm":null,"TrainingName":null,"TrainingDescription":null};

因此，SearchText和SearchTextId嵌套在ClientEmployeeSelector中。另一个问题是这些字段上的observable正确设置为零和null，但是当它们从自动完成更改时没有更新。所以我修复它的方式如下; function Employee（id，text）{ var self = this; self.searchId = id.val（）; self.searchText = text.val（）; }

    var initialData = <%= new JavaScriptSerializer().Serialize(Model) %>;
    function ViewModel() {
        var self = this;
        self.employees = ko.observableArray(initialData.EmployeeList);
        self.searchText = ko.observable($('#SearchText'));
        self.searchId = ko.observable($('#SearchTextId'));
        self.removeEmployee = function(employee) {
            self.employees.remove(employee);
        };
        self.addEmployee = function() {
            self.employees.push(new Employee(self.searchId(), self.searchText()));
            $('#SearchText').val('');
        };
        self.save = function() {
            ko.utils.postJson(location.href, { employees: self.employees });
        };
    }
    ko.applyBindings(new ViewModel());
</script>

现在我不知道这是否是最好的答案，但据我所知，它可行。

Answer 3

好的，这是我的第二个答案，考虑到antishok对我的第一个答案的有效批评。我遇到的问题是我将变量initialData设置为模型。但是，自动填充字段不在模型中。所以这是我脚本中的解决方案;

<script type="text/javascript">
    function Employee(id, text) {
        var self = this;
        self.searchTextId = ko.observable(id);
        self.searchText = ko.observable(text);
    }
    $(document).ready(function () {
        $('#SearchText').attr("data-bind", "value: autocompleteSearchText");
        $('#SearchTextId').attr("data-bind", "value: autocompleteSearchTextId");

        var initialData = <%= new JavaScriptSerializer().Serialize(Model) %>;
        var autocompleteData = { "autocompleteSearchTextId": 0, "autocompleteSearchText": null };
        function ViewModel() {
            var self = this;
            self.employees = ko.observableArray(initialData.EmployeeList);
            self.autocompleteSearchText = ko.observable(autocompleteData.autocompleteSearchText);
            self.autocompleteSearchTextId = ko.observable(autocompleteData.autocompleteSearchTextId);
            self.removeEmployee = function(employee) {
                self.employees.remove(employee);
            };
            self.addEmployee = function() {
                self.employees.push(new Employee(self.autocompleteSearchTextId(), self.autocompleteSearchText()));
                self.autocompleteSearchText('');
            };
            self.save = function() {
                var trainingName = $("#TrainingName").val();
                var trainingDescription = $("#TrainingDescription").val();
                ko.utils.postJson(location.href, { employees: self.employees, trainingName: trainingName, trainingDescription: trainingDescription });
            };
        }   
        ko.applyBindings(new ViewModel());
    });
</script>

我使用JQuery将数据绑定放入自动完成字段，然后observable按预期工作。我从这方面学到了很多东西 - 也许这仍然不是最好的解决方案？但非常感谢antishok。

我的淘汰代码没有更新我的视图

3 个答案: