带淘汰赛的动态模板答案

【问题标题】：Dynamic templates with knockout带淘汰赛的动态模板
【发布时间】：2012-07-16 13:10:54
【问题描述】：

我有一个视图模型，当我的应用程序状态发生变化时，我想在运行时动态更改其模板。我提到了这个link 同时提出我的解决方案。

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

<div class="app" 
     data-bind="template: {name: templateSelector, foreach: viewModelBackStack}">
</div>

而我的 templateSelector 方法如下所示：

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

    return _itemTemplate();
}

var _itemTemplate;

可以看出，我正在构建一个计算的 observable，它返回 viewModel 的模板。

我的视图模型如下所示：

function MyViewModel
{
    this.template = ko.observable("MyTemplate");
}

由于完成了 ajax 调用，我正在更改模板的值，并且我看到计算的 observable 也被正确调用（我在其中放置了一个警报以验证它），但是 html 中的绑定没有更新我的视图模型的模板。任何帮助将不胜感激。

更新：我发现了导致它无法工作的错误。基本上我在包含 knockout.js 之前包含了 jquery.tmpl 插件。删除 jquery.tmpl 就行了！

【问题讨论】：

标签： templates dynamic knockout.js jquery-templates

【解决方案1】：

我没有看到您的代码有问题，除非它位于您更新模板 observable 作为 AJAX 调用的结果的部分。确保您有对视图模型的引用，并将其设置为可观察的 vm.template(newValue);，而不是重新创建可观察的。

您的代码正在运行：http://jsbin.com/ipijet/5/edit#javascript,html,live

需要注意的一点是，绑定已经在计算的 observable 的上下文中执行，因此没有必要在 templateSelector 函数中创建自己的绑定。

您可以简单地创建一个直接返回您的 observable 的函数，例如：

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

http://jsbin.com/ipijet/3/edit#javascript,html,live

这是我不久前写的一篇关于这个主题的文章：http://www.knockmeout.net/2011/03/quick-tip-dynamically-changing.html

【讨论】：