Question

我有一个viewmodel，当我的应用程序状态发生变化时，我想在运行时动态更改其模板。我提到了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的模板。

我的viewModel看起来像这样：

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

由于ajax调用已完成，我正在更改模板的值，我也看到计算的observable也被正确调用（我在那里放置了一个警告来验证它），但是html中的绑定不会更新我的viewmodel的模板。任何帮助将不胜感激。

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

Answer 1

我没有看到你的代码有问题，除非它位于你因为AJAX调用而更新模板observable的部分。确保您具有对视图模型的引用，并将其设置为可观察的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

带淘汰赛的动态模板

1 个答案: