【问题标题】:How to run regular/normal JavaScript code with Knockout JS loops etc如何使用 Knockout JS 循环等运行常规/普通 JavaScript 代码
【发布时间】:2012-03-31 10:24:12
【问题描述】:

假设您有一个简单的淘汰赛循环

<!-- ko foreach: data -->
    <div ... show something </div>
<!-- /ko -->

我想在循环的每次迭代中运行一些额外的 JavaScript 代码是什么(只想将此代码放在视图中而不是模型中)。不确定使用脚本标签是否合适,我认为如果代码在敲除模板中,那将不会起作用,因为该模板已经包含在脚本标签中。

在其他一些情况下,我虽然能够在淘汰视图中运行正常的 JavaScript 代码,但会很有用。这不是我经常想要做的事情,但似乎在极少数情况下,如果我可以只使用常规 JS 而不是更改其他东西会更容易。

【问题讨论】:

  • 只是进一步补充,在一种特殊情况下,我正在循环一个大数组并将一个列表返回给用户。在这个循环的某个时刻,我希望列表中的其余行以不同的方式呈现。例如,我可以在我的模型中有一个函数来确定该行是否应该以一种或另一种方式呈现,但是这种比较操作并不直接,并且需要操作 2 个字符串来进行比较。
  • 我考虑的另一种选择是在循环中使用标志。一旦满足所需条件,将设置一个标志,其余行将以不同方式呈现。 (在循环中进行比较更便宜,因为我可以只查找精确的字符串匹配,而不是操作字符串来确定一个字符串是否在另一个之前,如果我在模型中进行比较则需要这样做)。我宁愿将标志本地存储在循环中,而不是将标志存储在模型中。这就是为什么我想在淘汰赛循环中运行 JS。
  • 除此之外,我还想知道一种在淘汰视图中运行普通 JavaScript 的粒子方法,因为在其他情况下我可能会在极少数情况下需要它

标签: javascript mvvm knockout.js


【解决方案1】:

您可以在 foreach 期间使用 afterAdd 处理程序执行函数

<!-- ko foreach: { data: data, afterAdd: myhandler } -->
    <div ... show something </div>
<!-- /ko -->

希望这会有所帮助。

【讨论】:

  • 感谢您提供有用的提示,立即试用
  • 使用 addAfter 很好,但不是 100% 适合我的想法。我想初始化一个稍后在循环中检查的标志。问题出在循环的第一次迭代中,标志未初始化。我使用了这个非常肮脏的技巧 我自己也不喜欢。有没有更简单的方法来做到这一点?是否值得编写一个允许“内联”javascript的自定义绑定?也许我有点跑题了。
  • @Sam - 如果您发布一个小提琴来展示您想要实现的目标,我相信我们可以找到一种更简单的方法。我以前从来不需要像这样的内联 js。
【解决方案2】:

你不应该那样做。

原因是,您将混合业务逻辑和数据,这是不应该发生的。

【讨论】:

  • 您好 Dhaivat,感谢您的回复。我明白你在说什么,这不是我打算定期做的事情。但是,如果不深入了解我目前的具体情况,我觉得在淘汰赛循环中使用常规 JS 会更容易。
  • 另外,在其他情况下,我可能只想出于调试和实验目的这样做
  • 但是,淘汰赛并不想要你这样做;这就是为什么他们不让你!几乎总是有更好的方法来调试这样的东西;查看 Chrome 的开发者工具或 Firebug 之类的东西。
  • 我已经熟悉并使用 Firebug 和 console.debug() 等。我认为您没有抓住重点,我已经考虑过其他选项,在这种情况下,尝试捕获模型内部的业务逻辑,因为它是业务登录的一个相当肤浅的要求。但是在这种情况下使用模型可能意味着每次循环迭代都要进行复杂的比较,这对性能不利,所有这些都可以用循环内的 1 或 2 行 JavaScript 代替。
  • 恐怕你没有读懂我在说什么。我已经多次声明,淘汰赛将提供执行此操作的实用程序,您一开始不应该这样做。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-06-01
  • 1970-01-01
  • 2016-03-24
  • 2018-02-28
  • 2021-01-31
  • 2018-01-06
  • 2017-10-12
相关资源
最近更新 更多