Question

我诚实地试图自己解决这个问题。这是一个非常简单的尝试，但我不能让它工作！现在，是时候在这里提出我的问题。

问题：表中没有显示可观察数据。

 @using (Ajax.BeginForm("GetSubscriptionInfo", new AjaxOptions
      {
           HttpMethod = "POST",
           OnSuccess = "ListsReceived"
      }))

从服务器获取数据，这是列表：

data: "[{"ListID":1,"ListName":"one list ","ListDescription":"one list description","OptIn":true},{"ListID":2,"ListName":"two list ","ListDescription":"two list description","OptIn":false},{"ListID":3,"ListName":"three list ","ListDescription":"three list description","OptIn":true},{"ListID":4,"ListName":"four list ","ListDescription":"four list description","OptIn":false},{"ListID":5,"ListName":"five list ","ListDescription":"five list description","OptIn":false},{"ListID":6,"ListName":"six list ","ListDescription":"six list description","OptIn":false}]"

在我的页面底部，我定义了回调函数和数据结构：

<script type="text/javascript">
        function ListsReceived(data)
        {
            PageViewModel.subscriberLists = ko.mapping.fromJSON(data);
        }

        function PageViewModel() {
            var self = this;
            self.subscriberLists = ko.observableArray([]);
        };

        ko.applyBindings(new PageViewModel());
    </script>

现在，我的表：

<table class="table table-hover">
                <caption class="text-left">Subscription lists and status:</caption>
                <tr>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Opt In</th>
                </tr>
                <tbody data-bind="foreach: subscriberLists()">
                    <tr>
                        <td data-bind="value: ListName"></td>
                        <td data-bind="value: ListDescription"></td>                        
                        <td data-bind="checked: OptIn"></td>                        
                    </tr>
                </tbody>
            </table>

我在这里做错了什么？谢谢你的帮助。

Answer 1

在第一个示例中，您将subscriberLists声明为“静态”变量，该变量未针对此对象的实例声明。这就是为什么数据不适用于PageViewModel的实例当你打电话给ListsReceived时。

但是，在第二个示例中，您在使用litaral对象语法时创建了ViewModel的对象实例。因此，在调用ProcessListsReceived时，您将数据传递给ViewModel的对象实例。

这就是为什么你的第二个例子有效，而第一个例子没有。

然而，像这样声明PageViewModel会更简洁：

function PageViewModel() {

    this.subscriberLists = ko.observableArray([]);
    self = this;

    this.ListsReceived = function (data) {
        this.subscriberLists = ko.mapping.fromJSON(data);
        ko.applyBindings(self);
    };
}

var someData = []; //some JSON Data
var pageViewModel = new PageViewModel();
pageViewModel.ListReceived(someData);

这种方式subscriberLists将是PageViewModel的公共属性。将数据传递给ListsReceived subscriberLists后，数据和绑定将被刷新。

Answer 2

试试这个

<script type="text/javascript">
        function ListsReceived(data)
        {
            PageViewModel.subscriberLists = ko.mapping.fromJSON(data);
            ko.applyBindings(new PageViewModel());
        }

        function PageViewModel() {
            var self = this;
            self.subscriberLists = ko.observableArray([]);
        };       
</script>

如果您的AJAX调用没有错误并且您正在ListsReceived函数中获取数据，那么在数据映射完成后调用ko.applyBindings。很可能在ko.applyBindings之前调用ListsReceived并且数据映射已完成。

Knockout.js数据未显示在表格中

2 个答案: