需要了解在 MVC 4 中使用 Knockout 显示数据

Question

我对 Knockoutjs 不是很熟悉。所以我正在阅读关于 Knockoutjs 的文章。这是我阅读的 url http://www.c-sharpcorner.com/UploadFile/raj1979/display-data-using-knockout-in-mvc-4/。

看不懂Knockoutjs相关代码

<script type="text/javascript">
       function EmployeeViewModel() {
        var self = this;
        //Declare observable
        self.EmployeeID = ko.observable("");
        self.FirstName = ko.observable("");
        self.LastName = ko.observable("");
        self.City = ko.observable("");
        self.Region = ko.observable("");
        self.PostalCode = ko.observable("");
        self.Country = ko.observable("");

        var Employee = {
            EmployeeID: self.EmployeeID,
            FirstName: self.FirstName,
            LastName: self.LastName,
            City: self.City,
            Region: self.Region,
            PostalCode: self.PostalCode,
            Country: self.Country
        };

        self.Employee = ko.observable();
        self.Employees = ko.observableArray();
        // Initialize the view-model

        $.ajax({
            url: '@Url.Action("GetAllEmployees", "Employee")',
            cache: false,
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            data: {},
            success: function (data) {
                self.Employees(data);
            }
        });

        $(document).ready(function () {
            var viewModel = new EmployeeViewModel();
            ko.applyBindings(viewModel);
        });
    }
</script>

我知道第一个 EmployeeViewModel() 函数被调用了。

我理解这种方式声明可观察属性。

问题区域 1

var self = this;
self.EmployeeID = ko.observable("");
self.FirstName = ko.observable("");
self.LastName = ko.observable("");
self.City = ko.observable("");
self.Region = ko.observable("");
self.PostalCode = ko.observable("");
self.Country = ko.observable("");

但我不明白下面的代码.....只是看看并告诉我它在做什么

问题区域 2

var Employee = {

            EmployeeID: self.EmployeeID,
            FirstName: self.FirstName,
            LastName: self.LastName,
            City: self.City,
            Region: self.Region,
            PostalCode: self.PostalCode,
            Country: self.Country
        };
self.Employee = ko.observable();
self.Employees = ko.observableArray();

就是不明白how each Employee will be pushed to Employees arrays？如果可能的话，请帮助我理解完整的 knockout js 相关代码，比如正在发生的事情。谢谢

Answer 1

self.Employee = ko.observable();

我没有看到 Employee 在 js 代码中的任何地方被使用。我假设它可能被声明为存储正在更新的当前实例。

self.Employees = ko.observableArray();

但是 Employees 被定义为 ObservableArray 这意味着 Knockout 将继续监视该数组，并且当任何东西被分配给该数组或添加到该数组时它也会更新 ui 一些 foreach 类型的东西会被实现的地方。

对于可观察数组和 foreach 绑定，请查看 官方文档 of knockout js => link

更新

Employees 集合在以下 html 中具有绑定。

<tbody data-bind="foreach: Employees">
        <tr>
            <td data-bind="text: EmployeeID">
            </td>
            <td data-bind="text: FirstName">
            </td>
            <td data-bind="text: LastName">
            </td>
            <td data-bind="text: City">
            </td>
            <td data-bind="text: Region">
            </td>
            <td data-bind="text: PostalCode">
            </td>
            <td data-bind="text: Country">
            </td>
            <td>
                <button data-bind="click: $root.edit">
                    Edit</button>
                <button data-bind="click: $root.delete">
                    Delete</button>
            </td>
        </tr>
    </tbody>

因此在 ajax 成功调用后 Json 将返回的任何内容都将分配给下面代码段中定义的员工集合。

$.ajax({
            url: '@Url.Action("GetAllEmployees", "Employee")',
            cache: false,
            type: 'GET',
            contentType: 'application/json; charset=utf-8',
            data: {},
            success: function (data) {
                self.Employees(data);
            }
        });

现在轮到创建与 Employees 可观察数组中一样多的行了。即使您在运行时向该可观察数组添加任何对象，它也会为您创建 tr 和 td 标签。你不需要为此烦恼。

需要了解在 MVC 4 中使用 Knockout 显示数据

Need to understand Display data using Knockout in MVC 4

javascript

asp.net-mvc

mvvm

knockout.js

问题区域 1

问题区域 2