Knockout.js 淘汰JS-基于点击链接的显示模板

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

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

希望这是清楚的-我已将所有代码放在以下JSFIDLE中：

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

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

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

任何协助都将不胜感激

---

编辑：根据建议使用工作代码更改js FIDLE链接。

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

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

但是你的代码还有一些错误。要使其正常工作，您需要修复模板，删除可观察对象的括号

（）

。您不应该在HTML中使用它们（计算表达式时有一个例外）

条约价值：

以下是处理这些变化和其他变化的方法： 我可能不应该删除jquery及其DOM就绪事件

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

---

设置

selectedLayerType

和

selectedLayer

时出现问题。您可能打算使用第一个来选择模板，第二个是数据。但是您会一个接一个地进行设置，这样knokoutjs有时会根据

selectedLayerType

的不同数据和不同的模板名称，而这些数据和模板名称尚未更新，反之亦然。因此，我的

displayertype

函数仅基于

selectedLayer

及其

layerType

属性。它更干净、更简单（更少的地方有bug），但如果你真的需要它，你可以用两个观察点来做。搜索观察到的无声更新。以静默方式更新其中一个，然后让另一个冒泡突变。

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

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

但是你的代码还有一些错误。要使其正常工作，您需要修复模板，删除可观察对象的括号

（）

。您不应该在HTML中使用它们（计算表达式时有一个例外）

条约价值：

以下是处理这些变化和其他变化的方法： 我可能不应该删除jquery及其DOM就绪事件

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

---

设置

selectedLayerType

和

selectedLayer

时出现问题。您可能打算使用第一个来选择模板，第二个是数据。但是您会一个接一个地进行设置，这样knokoutjs有时会根据

selectedLayerType

的不同数据和不同的模板名称，而这些数据和模板名称尚未更新，反之亦然。因此，我的

displayertype

函数仅基于

selectedLayer

及其

layerType

属性。它更干净、更简单（更少的地方有bug），但如果你真的需要它，你可以用两个观察点来做。搜索观察到的无声更新。悄悄地更新其中一个，然后让另一个冒泡突变。

请检查小提琴中的错误，并修复它们。在chrome中按F12并单击console选项卡。它会显示错误，你可以点击链接查看代码行。我已经按照建议更新了小提琴-谢谢。我的资源中没有包含jQuery。请检查小提琴中的错误，并修复它们。在chrome中按F12并单击console选项卡。它会显示错误，你可以点击链接查看代码行。我已经按照建议更新了小提琴-谢谢。我的资源中没有包含jQuery。太好了，它看起来正是我需要的。然而，我正在努力理解解决方案的要素。每个

项的匿名函数中的“事件”是什么？绑定（self）做什么？事件包含有关“单击”、鼠标位置和其他信息。这对你的问题没有必要。我刚刚从淘汰文档原样重写了它，请参见注释2:Bind确保函数中的“this”等于“self”。这也不是必须的，但这是我在阅读stockoverflow时学到的一个很好的做法。这很好-谢谢你的详细回答和后续评论。这非常有帮助，非常感谢：）太好了，看起来这正是我需要的。然而，我正在努力理解解决方案的要素。每个

项的匿名函数中的“事件”是什么？绑定（self）做什么？事件包含有关“单击”、鼠标位置和其他信息。这对你的问题没有必要。我刚刚从淘汰文档原样重写了它，请参见注释2:Bind确保函数中的“this”等于“self”。这也不是必须的，但这是我在阅读stockoverflow时学到的一个很好的做法。这很好-谢谢你的详细回答和后续评论。这非常有帮助，非常感谢：）