问题标签 [knockout-templating]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
813 浏览

knockout.js - 使用 $root 引用传递给模板的数据

我有一个模板:

以及我使用它的以下标记:

这就是我应用绑定的方式:

问题是$root在模板中被解析为传递给的对象ko.applyBindings(即具有GeneralOptionsInstructions属性的对象),而不是template绑定中指定的对象,这是我的SegmentInstructionsModel类的一个实例。

我至少可以通过两种方式解决这个问题,但我都不喜欢:

  1. 继续$root在模板中使用,但向下遍历到模板渲染的实际视图模型

    我不喜欢这样,因为模板不应该担心实际视图模型之上的对象是如何构造的。

  2. 使用$parents数组

    出于明显的原因,我不喜欢这个(一方面,一旦将实际模板的视图模型传递给它,它就会停止工作ko.applyBinding

有没有办法继续$root在模板中使用,而不用担心模板与其消费者向它提供数据的方式紧密耦合?

0 投票
1 回答
2972 浏览

javascript - KO 模板中的 JavaScript

如何将脚本放入淘汰赛模板中?

这不起作用:

是我试图在每个使用some-template. 脚本可能会被修改,但我宁愿使用原始版本。

0 投票
0 回答
165 浏览

javascript - 在淘汰单页应用程序中切换视图时发生内存泄漏

我的应用程序包含一个外壳视图,它使用淘汰赛的模板引擎在其中加载子视图。所有的观点都建立在淘汰赛之上。

在视图之间导航时,可观察对象的值发生变化,表明需要将新视图绑定到模板。

我已经使用 node webkit 将应用程序打包到一个 exe 中,很明显,当我切换视图时 RAM 使用量不断增加。仅当应用程序关闭时才会释放内存。

知道我应该在代码中寻找哪些可能导致此泄漏的危险信号以及哪些工具可以帮助我查明问题吗?

0 投票
3 回答
4215 浏览

javascript - 使用 Knockout 组件时替换容器元素

有没有办法配置一个Knockout 组件替换容器元素,而不是将其内容嵌套在容器元素中?

例如,如果我有一个my-custom-element使用以下模板注册的自定义组件:

是否可以像这样使用组件:

最终产品是这样的:

而不是这个:(默认情况下 Knockout 呈现组件的方式)

根据对这个问题的回答,这个功能似乎内置在模板引擎中,我假设在渲染组件模板时也会使用它。

有没有办法指定一个组件应该用renderModeof呈现replaceNode

我知道“虚拟元素”语法,它允许在 HTML 注释中定义组件:

但我真的不喜欢这种语法——在评论中编写真正的代码感觉像是一种肮脏、肮脏的黑客行为。

0 投票
1 回答
427 浏览

jquery - 使用 Knockout JS 如何使用模板绑定动态呈现 JavaScript 代码

我正在使用 Knockout 模板绑定动态构建 HTML 表单。每个表单定义都有自己的一组用于自定义验证的 JavaScript 函数。

如何将 java 脚本代码(函数)呈现到页面,以便在验证期间调用它们?动态插入 JavaScript 代码的原因是因为它们是用户定义的。

最终结果应该是:

当自定义验证只使用一个 JavaScript 函数时,“没问题”——我可以使用 eval() 命令来执行它。但是,当函数需要引用另一个函数时,事情就会变得更加复杂。我这里有两个问题:

  1. 我不应该使用 eval() 命令,因为它速度慢且不安全。
  2. 当一个函数需要引用另一个函数时,即使 eval() 选项也不会帮助我。

所以我想如果可以在脚本标签内动态呈现所有 JavaScript 函数,然后我可以使用 [Window].[functionName] 而不是使用 eval() 命令来引用这些函数。

让我强调一点,这些 JavaScript 函数并非都位于一个单独的文件中。它们分散在由服务器构建的复杂 JSON 对象中,该对象代表将驱动动态表单加载的表单定义。有许多不同的表单定义。

0 投票
1 回答
914 浏览

javascript - 如何在我的 Knockout.js 向导中获取单选按钮选项的值?

为了简化事情,这里是小提琴:http: //jsfiddle.net/FyuSD/157/

我想我有几个问题。我正在构建一个向导,并且需要不同的执行步骤,具体取决于用户选择的选项。我想知道的问题是,我如何获得他们选择的单选按钮的值?

就像第二步一样,如果他们选择“购买我以前购买过的产品”,我如何将其重定向到另一个问题:从指南创建订单或从以前的订单创建订单(再次使用单选按钮)?

我不知道如何获得他们选择的价值。此外,我将如何根据他们选择的选项跳过步骤?(例如,如果他们在第 2 步中选择“想要搜索产品”,则从第 2 步转到第 4 步)

最后,是否有一种简单的方法可以更改单选按钮文本以匹配问题,而无需为每个问题创建新模板?

抱歉,如果问题太多,谢谢您的帮助...

0 投票
1 回答
615 浏览

javascript - 如何在我的淘汰组件模板中访问我的视图模型变量?

我正在尝试使用 Knockout 组件/模板创建说明步骤列表。

UL 将包含一个步骤列表(使用淘汰注册的自定义元素sidebar-step),这只是<li></li>. 我的模型中有另一个值this.testVar部分,它可以包含<li>诸如class之类的属性,或者可能是"data-customAttribute"

我的问题是,如何将我的testVar价值包含在模板中?我想要它,以便它可以输出如下行:

<sidebar-step class=*testVar* params="vm: sidebarStepModel">Message 1</sidebar-step>

小提琴:https ://jsfiddle.net/uu4hzc41/1/

HTML:

JavaScript:

0 投票
1 回答
543 浏览

javascript - 为什么它以随机顺序初始化这个 Knockout.js 组件?

我已经超越了困惑...

我正在使用 Knockout.js 组件、模板和自定义元素创建一个列表。Viewmodel出于某种原因,我在自定义元素定义中以随机顺序初始化了我在其中创建的步骤!而且它是完全随机的,所以每次都不一样!

为了更好地说明这一点,最好查看JSFiddle。我把alert("break")每一步初始化后。加载一次,然后再次单击“运行”以正确查看演示。查看输出窗口,您可以看到除了首先编写步骤 1 之外,这些步骤总是随机出现(尽管它们最终保持它们的顺序)。

https://jsfiddle.net/uu4hzc41/8/

我需要以正确的顺序排列这些,因为我会将模型中的某些属性添加到数组中。当它们是随机的时,我无法正确访问数组元素。

HTML:

JS/淘汰赛:

0 投票
0 回答
399 浏览

knockout.js - 淘汰赛外部模板值重置

我正在使用淘汰赛外部模板 https://github.com/ifandelse/Knockout.js-External-Template-Engine

但是如何从外部模板中清除新绑定的值和文本。我的html代码是这样的

HTML

脚本 当我单击添加时,“RegistrationForm.html”中的表单值将绑定到网格,但同时我需要清除“RegistrationForm.html”中的所有绑定值。假设我在所选模板上有很多字段和一些文本绑定。所以我的问题是如何在单击按钮时从模板中清除绑定文本和表单值。

实际情况:

当打开用户模板时,与相应用户相关的值和文本将绑定到该模板。但是当我单击没有任何值的下一个用户时,第一个用户 vale 仍然存在。我为所有用户使用一个模板)

谢谢

编辑 我的代码喜欢这个结构

更新 我已经改变了概念,让我知道如何在淘汰赛外部模板中禁用缓存模板。到目前为止,我已经尝试过:

但不工作,我只需要刷新模板。谢谢

0 投票
1 回答
144 浏览

javascript - 如何将 HTML 添加到此 Knockout.js Viewmodel 变量?

我在页面上显示了一个步骤列表。一些步骤(但不是全部)将有 1-3 个子步骤。我在想最简单的方法是在视图模型的每个步骤声明中手动编写 HTML。

如果您查看下面的代码,我想做的是:

问题是,在那里编写的 HTML 被解释为 astring而不是HTML. 我怎样才能使它将 HTML 解释为实际的 HTML?

小提琴:https ://jsfiddle.net/8o31m6rq/2/

HTML:

JavaScript/淘汰赛: