javascript - Uncaught ReferenceError : Unable to process binding with Ajax

Question

我有两层 MVC4 .NET 应用程序，带有 DAL 和 Web 层。 我在尝试将数据与 Ajax 返回的数据绑定(bind)时遇到问题。

在 Html 上，我试图获取 SubcriteriaList 成员并为每个成员创建表，同时填充它们的值。

HTML:

 <h2 style="text-align:center">Criteria Info</h2>
<table align="center">
    <tr>
        <th colspan="3">Subcriteria Info</th>
    </tr>
    <tr>
        <td>
            <table class="table-condensed">
                <tbody data-bind="foreach:SubcriteriaList">
                    <tr>
                        <td>
                            <table class="table-condensed">
                                <tr>
                                    <th colspan="5" width="100%;">
                                        <select style="width:100%;"></select>
                                    </th>
                                    <td>
                                        <a class="btn btn-small btn-danger" href="#" style="margin-bottom:10px">X</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label style="padding-top:5px;">Code</label>
                                    </td>
                                    <td>
                                        <input class="input-large" placeholder="Code" data-bind="value:Code" />
                                    </td>
                                    <td>
                                        <label style="padding-top:5px;">Weight</label>
                                    </td>
                                    <td>
                                        <input class="input-large" placeholder="Weight" data-bind="value:Weight" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label style="padding-top:5px;">Name</label>
                                    </td>
                                    <th colspan="4" width="100%;">
                                        <input style="width:100%;" class="input-large" placeholder="Name" data-bind="value:Name" />
                                    </th>
                                </tr>
                                <tr>
                                    <td>
                                        <label style="padding-top:5px;">Goal</label>
                                    </td>
                                    <td>
                                        <input class="input-large" placeholder="Goal" data-bind="value:Goal" />
                                    </td>
                                    <td>
                                        <label style="padding-top:5px;">Achieved</label>
                                    </td>
                                    <td>
                                        <input class="input-large" placeholder="Achieved" data-bind="value:Achieved" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>
    <tr style="text-align:right">
        <td>
            <p>
                <button class="btn btn-small btn-primary">Add Criteria</button>
            </p>
        </td>
    </tr>
</table>

在不同的 JavaScript 文件中 knockout JS ViewModel。

JavaScript 文件:

function SubCriteriaViewModel() {
    var self = this;

    self.id = ko.observable("");
    self.code = ko.observable("");
    self.name = ko.observable("");
    self.weight = ko.observable("");
    self.goal = ko.observable("");
    self.achieved = ko.observable("");
    self.isActive = ko.observable("");

    var Subcriteria = {
        Id: self.id,
        Code: self.code,
        Name: self.name,
        Weight: self.weight,
        Goal: self.goal,
        Achieved: self.achieved,
        IsActive: self.isActive
    };

    self.Subcriteria = ko.observable();
    self.SubcriteriaList = ko.observableArray();

    // Initializing the view-model
    $.ajax({
        url: "/Subcriteria/GetAllSubcriteria",
        cache: false,
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        data: {},
        success: function (data) {
            alert(data);
            //Probably Problem is here
            self.SubcriteriaList(data); //Putting the response in ObservableArray
            alert(SubcriteriaList);
            alert(Subcriteria);
        }
    });
}
var viewModel = new SubCriteriaViewModel();
ko.applyBindings(viewModel);

当 alert(data) 命中时，我可以看到； [object 对象],[object 对象],[object 对象] 成功返回，但我无法将此 JsonResult 添加到 SubCriteriaList 数组。

因此(我认为)我得到了

*Uncaught ReferenceError: Unable to process binding "value: function(){return Code }" Message: Code is not defined*

错误。

我如何使用此 Ajax 用法填充此 SubcriteriaList 数组？

提前致谢。

Answer 1

您的数据绑定(bind)是 Code，但您的 observable 是 code。变量名称区分大小写。您需要修复所有不匹配的问题，因为一旦您修复了这个问题，其他问题就会失败。

不过，您还有一些其他问题。您实际上并没有将响应映射到您的 View 模型。您可能应该有父 View 模型和 subview 模型。 child 将拥有属性，并将成为 ajax 响应的映射。 child 将维护列表，执行 ajax 请求等。

function SubCriteriaViewModel(data) {
    var self = this;

    self.id = ko.observable(data.id);
    self.code = ko.observable(data.code);
    self.name = ko.observable(data.name);
    self.weight = ko.observable(data.weight);
    self.goal = ko.observable(data.goal);
    self.achieved = ko.observable(data.achieved);
    self.isActive = ko.observable(data.isActive);        
}

function ViewModel() {
    var self = this;
    self.SubcriteriaList = ko.observableArray();

    // Initializing the view-model
    $.ajax({
        url: "/Subcriteria/GetAllSubcriteria",
        cache: false,
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        data: {},
        success: function (data) {
            var subcriteriaList = data.map(function (item) { return new SubCriteriaViewModel(item); });
            self.SubcriteriaList(subcriteriaList); //Putting the response in ObservableArray
        }
    });
}
var viewModel = new ViewModel();
ko.applyBindings(viewModel);

然后，记得解决所有大小写问题。这只是一个:

<input class="input-large" placeholder="Code" data-bind="value:Code" />

应该是

<input class="input-large" placeholder="Code" data-bind="value:code" />