1

我有一个带有一些模拟数据的单页应用程序。我正在显示一个无序列表。该列表是嵌套的。当您根据单击的项目单击列表中的项目时，它会在我的 VM 中设置两个属性，“selectedLayer”或“selectedProgramme”。一个层嵌套在一个程序下。

单击图层时，我调用一个将“selectedProgramme”设置为父级的函数-到目前为止一切都很好。我现在想根据图层的类型显示不同的内容。我有 3 个模板，但我想根据“selectedLayer”的“layerType”值显示一个模板。

希望这很清楚 - 我已将所有代码放在以下 JSFiddle 中：http: //jsfiddle.net/AzVbR/9/

通常我无法让数据显示在我的小提琴中，但正如您所见，我有以下 HTML 来确定图层类型，然后以某种方式使用正确的模板：

<div id="layerDetails" data-bind="template: { name: $root.displayLayerType }">
</div>

我确实尝试过传递 2 个参数，即程序对象和 $data，但我不确定自己在做什么。

任何援助将不胜感激。

编辑：按照建议更改了带有工作代码的 js fiddle 链接。

4

1 回答 1

1

根据某个值选择模板：当您绑定模板时，将其用作将返回正确名称的名称函数：

this.displayLayerType = function() {
            if ( self.selectedLayer() ) {
                return self.selectedLayer().layerType.toLowerCase()+"-template";
            } else {
                return "error-template";
            }
    };

但是您的代码还有更多错误。为了让它工作，你需要修复你的模板，去掉()observables 的括号。你不应该在 HTML 中使用它们（评估表达式有一个例外）。

<script type="text/html" id="treaty-template">
    <!-- ko with: $root.selectedLayer -->
    <h5 data-bind="text: LayerTitle"></h5>

    <p><!--ko text: layerType --><!--/ko--></p>
    <p>Treaty value: <span data-bind="text: treatyValueThing"></span></p>
    <!-- /ko -->
</script>

这里正在处理这些和其他更改： http: //jsfiddle.net/AzVbR/11/ 我可能不应该删除 jquery 并且它是 DOM 就绪事件。

您传递更多参数的实现已正确完成，并记录在 knockoutJS 文档中。

selectedLayerType和设置有问题selectedLayer。您可能打算首先用于选择模板，其次是数据。但是你一个接一个地设置，所以 knokoutjs 有时会根据尚未更新的数据和不同的模板名称，selectedLayerType反之亦然。所以我的displayLayerType功能仅基于selectedLayer及其layerType属性。它更干净更简单（错误的地方更少），但如果你真的需要它，你可以用两个 observables 来做。搜索 observables 的静默更新。默默地更新其中一个，然后让另一个冒泡突变。

于 2013-07-25T09:44:11.967 回答