Question

我有一个带有一些模拟数据的单页面应用程序。我正在显示一个无序列表。该列表是嵌套的。根据单击的项目单击列表中的项目时，它会在我的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链接和工作代码。

Answer 1

根据某些值选择模板：绑定模板时使用的名称函数将返回正确的名称：

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

但是你的代码有更多的错误。要使其工作，您需要修复模板，为可观察对象删除括号()。您不应该在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属性。它更干净，更简单（错误的地方更少），但如果你真的需要你的方式，有两个可观察的，你可以做到。搜索可观察量的静默更新。默默地更新其中一个，然后让另一个冒泡突变。

Knockout JS - 基于点击链接显示模板

1 个答案: