异步加载Knockout组件中的模板

Question

我对Knockout很有经验，但这是我第一次使用组件，所以我真的希望我错过了一些明显的东西！我会尝试简化一下我的用例，以解释我的问题。

我有一个名为Index的html和JS文件。 Index.html具有组件的数据绑定，而Index.js具有ko.components.register调用。

的index.html

<div data-bind="component: { name: CurrentComponent }"></div>

Index.js

var vm = require("SectionViewModel");
var CurrentComponent = ko.observable("section");
ko.components.register("section", {
    viewModel: vm.SectionViewModel,
    template: "<h3>Loading...</h3>"
});
ko.applyBindings();

然后我有另一个HTML和JS文件 - Section.html和SectionViewModel.js。如您所见，SectionViewModel是我指定为组件的视图模型。

Section.html

<div>
    <span data-bind="text: Section().Name"></span>
</div>

SectionViewModel.js

var SectionViewModel = (function() {
    function SectionViewModel() {
        this.Section = ko.observable();
        $.get("http://apiurl").done(function (data) {
            this.Section(new SectionModel(data.Model)); // my data used by the view model
            ko.components.get("dashboard", function() {
                component.template[0] = data.View; // my html from the api
            });
        });
    }
    return SectionViewModel;
});
exports.SectionViewModel = SectionViewModel;

作为SectionViewModel中构造函数的一部分，我调用了我的API来获取填充视图模型所需的所有数据。此API调用还返回我需要在我的模板中使用的HTML（基本上是从Section.html中读取的）。

显然，在我调用applyBindings之前不会调用此构造函数，所以当我进入API调用的成功处理程序时，我的组件上的模板已经设置为我的默认文本。

我需要知道的是，我是否可以更新此模板？我在成功处理程序中尝试了以下内容，如上所示：

ko.components.get("section", function(component) {
    component.template[0] = dataFromApi.Html;
});

这确实用我的API返回的html替换了我的默认文本（如调试工具中所示），但此更新未反映在浏览器中。

所以，基本上毕竟，我真的要问的是，有没有办法在绑定后更新组件模板的内容？

我知道解决上述问题的一个选项，你可能会想到要求模板，但我真的已经简化了上面的内容，并且在它的完整实现中，我无法做到这一点，因此为什么API会返回HTML 。

任何帮助非常感谢！我目前有一个工作解决方案，但我真的不喜欢我必须构建JS代码以使其工作的方式，所以上面的解决方案将是理想的。

谢谢。

Answer 1

另一答案