从外部脚本调用 knockout.js 函数答案

【问题标题】：Calling knockout.js functions from external script从外部脚本调用 knockout.js 函数
【发布时间】：2014-04-30 19:35:24
【问题描述】：

好的，我是使用淘汰赛的新手，我想知道这应该如何工作。

我将它与 ASP.NET MVC 结合使用，如果这有什么不同的话。

理想情况下，我想在外部脚本文件中完成所有功能。在脚本文件中，我有以下功能：

function GetIncidentNotes (incidentID, node) {
    $.getJSON('GetIncidentNotes', { IncidentID: incidentID }, function (data, status, xhr) {
        var notesViewModel =
            { notesArray: ko.observableArray(data) }
        ko.applyBindings(notesViewModel, document.getElementById(node));
    });

在我的 cshtml razor 文件中，我正在使用以下内联脚本和关联的 html 进行测试：

<script type="text/javascript">
    $(document).ready(function () {
        $("#getNotes").on('click', function () {
            var id = 124;
            GetIncidentNotes(id, 'incidentNotes');
        });
    });
</script>

<table id="incidentNotes" data-bind="visible: notesArray().length > 0">
    <tbody data-bind="foreach: notesArray">
       <tr>
           <td><span data-bind="text: object.NoteID"></span></td>
       </tr>
    </tbody>
</table>

我正在取回 JSON 数组，但我的表中没有任何内容。我肯定做错了什么，但我不确定是什么。

这里是一个数组被带回来的例子：

[{"NoteID":3,
"IncidentID":124,
"GrievanceID":null,
"NoteSubtypeID":null,
"NoteDate":"2013-06-13T14:25:42.95",
"NoteBody":"travissimantor non non habitatio dolorum Quad esset rarendum eggredior. quartu et transit. imaginator Versus bono",
"CreateDate":"2014-04-23T16:12:01.553",
"CreateUser":"jsteranko",
"UpdateDate":"2014-04-23T16:12:01.553","UpdateUser":"jsteranko"},

{"NoteID":1,
"IncidentID":124,
"GrievanceID":496,
"NoteSubtypeID":6,
"NoteDate":"2000-01-30T13:27:14.51",
"NoteBody":"linguens e dolorum non transit. Quad imaginator Pro homo, quartu Quad Longam, rarendum Sed si egreddior estum. quartu",
"CreateDate":"2014-04-23T16:12:01.553",
"CreateUser":"jsteranko",
"UpdateDate":"2014-04-23T16:12:01.553",
"UpdateUser":"jsteranko"}]

【问题讨论】：

您仍然需要删除“对象”。从您的 html 模板。 “NodeID”是“notesArray”每个实例的直接属性。如果你想在它前面放一些东西，使用'$data'。（这是默认隐含的上下文）
我确实忘记编辑那部分了。谢谢！

标签： jquery asp.net-mvc knockout.js

【解决方案1】：

你在这里有一个数组，所以没有要显示的文本......你应该将你的 html 转换成类似于

<!-- ko foreach: notesArray -->
<span data-bind="text: propertyOfNote"></span>
<!-- /ko -->

【讨论】：

这没有帮助。这可能是映射问题吗？
所有映射插件在这里为你做的是自动创建 observableArray。如果你只有一个 property = ko.observableArray(dataArray) 并且不使用映射插件，那也是一样的。

【解决方案2】：

此时您似乎需要一个断点来检查这些值。如果您绝对确定您的 JSON 正确返回，那么这将是我的下一步。

ko.applyBindings(notesViewModel, document.getElementById(node));

变量 notesViewModel 和 node 是你所期望的吗？

【讨论】：

节点是正确的，但是 notesViewModel 的 notesArray 属性是这样返回的：notesArray = c()

【解决方案3】：

原来这确实是一个映射问题。我下载了映射插件，瞧。工作js函数：

function GetIncidentNotes(incidentID, node) {
    $.getJSON('GetIncidentNotes', { IncidentID: incidentID }, function (data, status, xhr) {
        var notesViewModel = { notesArray: [] };
        notesViewModel.notesArray = ko.mapping.fromJS(data);
        ko.applyBindings(notesViewModel, document.getElementById(node));
    });
}

【讨论】：