为什么我的 $parent 绑定上下文在 Knockout.js foreach 模板中是空的？

Question

我正在通过 Knockout 调用以下模板：

<script type="text/html" id="uploaded-files-template">
    <li data-bind="text: original_name"></li>
    <pre data-bind="text: ko.toJSON($parent, null, 2)"></pre>
</script>

这是在 foreach 循环中被调用的：

<ul class="files-list" data-bind="template: { name: 'uploaded-files-template', foreach: uploadedFiles, as: 'uploadedFile' }"></ul>

我试图从我的模板访问 $parent 绑定上下文，但我被告知它是 undefined，当我尝试输出它时 JSON-格式化（正如我上面所做的），它是空的。

$uploadedFiles 是一个 ko.observableArray():

self.uploadedFiles = ko.observableArray([]);

这是通过 AJAX 填充的，如下所示：

然后继续：

$.each(message.objects, function(index, object) {
    self.uploadedFiles.push(object);
});

如果我用 $data 替换 $parent，我可以看到正在输出的当前迭代。知道为什么 $parent 没有显示任何内容吗？

Answer 1

您的模板和绑定没有任何问题，请参阅工作 fiddle。

var SimpleListModel = function(items) {
    this.uploadedFiles = ko.observableArray(items);    
};

var model = new SimpleListModel([
    { original_name: "One" }, 
    { original_name: "Two" },
    { original_name: "Three" }]
)

ko.applyBindings(model);

一定是你的 viewModel 或 viewModel population 有误。

Answer 2

呃……好吧，这很尴尬。我的 $parent 上下文是空的，只是因为我没有实例化我的 ViewModel。我是这样做的：

$(document).ready(function() {
    ko.applyBindings(uploadViewModel);
});

我应该这样做的时候：

$(document).ready(function() {
    ko.applyBindings(new uploadViewModel());
});

不过，感谢 Max Brodin 和 supercool 的帮助。

为什么我的 $parent 绑定上下文在 Knockout.js foreach 模板中是空的？

Why is my $parent binding context empty inside a Knockout.js foreach template?

html

javascript

data-binding

knockout.js