0

我正在使用自动完成将名称添加到表行的动态列表中。当我添加一个新名称时，会创建一个新行，但不会更新 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>

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

<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 都没有设置。我究竟做错了什么？

4

3 回答 3

2

当您的代码调用new Employee(self.searchId, self.searchText)时，您将 2 个 observables 作为参数传递。也就是说，您传递的是 observables 本身，而不是它们的值。因此，新员工的属性将只是对主要 2 个可观察对象的引用。这可能不是你想要的。

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

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

这是一个小提琴证明：http: //jsfiddle.net/antishok/KXhem/73/

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

于 2012-10-15T16:41:38.007 回答
0

我不知道这是否是最好的答案，但感谢 antishok 在此过程中对我的帮助。实际的 JSON 数据存储如下；

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

因此 SearchText 和 SearchTextId 嵌套在 ClientEmployeeSelector 中。另一个问题是这些字段上的 observable 被正确设置为零和空，但是当它们从自动完成更改时没有更新。所以我修复它的方式如下；函数员工（id，文本）{ 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>

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

于 2012-10-16T07:09:43.130 回答
0

好的，这是我的第二个答案，考虑到 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 将数据绑定放入自动完成字段，然后可观察对象按应有的方式工作。我从中学到了很多——也许这仍然不是最好的解决方案？但非常感谢antishok。

于 2012-10-17T08:22:15.227 回答