Templates 带淘汰的动态模板

Templates 带淘汰的动态模板,templates,dynamic,knockout.js,jquery-templates,Templates,Dynamic,Knockout.js,Jquery Templates,我有一个viewmodel,当我的应用程序状态发生变化时,我希望在运行时动态更改其模板。我提到了这个 同时提出我的解决方案 在我的html页面中,我有一个绑定到视图模型列表的div: <div class="app" data-bind="template: {name: templateSelector, foreach: viewModelBackStack}"> </div> 如图所示,我正在构造一个返回viewModel模板的计算可观察对象 我的vi

我有一个viewmodel,当我的应用程序状态发生变化时,我希望在运行时动态更改其模板。我提到了这个 同时提出我的解决方案

在我的html页面中,我有一个绑定到视图模型列表的div:

<div class="app" 
     data-bind="template: {name: templateSelector, foreach: viewModelBackStack}">
</div>
如图所示,我正在构造一个返回viewModel模板的计算可观察对象

我的viewModel如下所示:

this.templateSelector = function(viewModel)
{
    if (!_itemTemplate)
    {           
      _itemTemplate = ko.computed(function() {return this.template();}, viewModel);
    }

    return _itemTemplate();
}

var _itemTemplate;
function MyViewModel
{
    this.template = ko.observable("MyTemplate");
}
由于ajax调用完成,我正在更改模板的值,并且我看到computed observable也被正确调用(我在其中放置了一个警报以验证它),但是html中的绑定不会更新viewmodel的模板。任何帮助都将不胜感激


更新:我发现了导致它无法工作的bug。基本上,在包含knockout.js之前,我已经包含了jquery.tmpl插件。删除jquery.tmpl成功了

我认为您的代码没有问题,除非它存在于您更新作为AJAX调用结果的可观察模板的部分。确保有对视图模型的引用,并将其设置为可观察的
vm.template(newValue)并且不重新创建可观察对象

以下是您的代码:

需要注意的一点是,绑定已经在计算的可观察对象的上下文中执行,因此没有必要在
templateSelector
函数中创建自己的绑定

您只需创建一个函数,直接返回您的可观测值,如:

this.getTemplate = function(data) {
   return data.template();
};

这是我不久前写的一篇关于这个话题的文章: