Knockout.js 模板范围的半全局变量

标签 knockout.js

有没有办法为 KO 定义(没有更好的术语)“半全局”变量?

我想让一个变量可用于单个 KO 模板,而不管上下文如何,同时将其与实际的全局范围和其他模板隔离开来。

目标是在不使用 $parent 的情况下,在任何绑定(bind)上下文中(例如,在 KO 的 foreach 中)拥有一组仅可用于该一个模板的辅助函数,就像全局变量总是可以在没有任何特殊语法的情况下访问一样。下面的例子:

// Template 1 - helpers.foo has been set for this Template or ViewModel
<div data-bind="text:helpers.foo('Works')"></div>
<div data-bind="foreach: someList">
    <div data-bind="text:helpers.foo('Context is inside someList. helpers.foo is not available :( ')"></div>
</div>

// Template 2 - helpers.foo is not set for this Template or ViewModel
<div data-bind="text:helpers.foo('Should not work')"></div>

最佳答案

我还不确定,但我想我找到了解决方案。第 n 次浏览 KO 文档后,我发现:Supplying additional values to descendant bindings .

对于那些tl;博士:
我可以使用该自定义绑定(bind)处理程序在每个子上下文中向模板公开任何变量,这正是我所寻找的。换句话说,这成为可能:

查看型号

<script>
ViewModel = {
    Helpers: {
        foo: function(message) {return message;}
    },
    someList: [
        'foo',
        'bar',
        'baz'
    ]
}
</script>

HTML
<div data-bind="text:helpers.foo('Helpers.foo can be used because we are in the root context')"></div>

<div data-bind="foreach: someList">
    <div data-bind="text:helpers.foo('We are in the context of someList. This will fail.')"></div>
</div>

<div data-bind="withProperties:{Helpers:Helpers}">
    <div data-bind="foreach: someList">
        <div data-bind="text:helpers.foo('Helpers.foo can now be used inside every subcontext, thanks to the withProperties custom binding')"> </div>
    </div>
</div>

在我的情况下,自定义绑定(bind)包装器可以在加载每个模板时自动应用,所以这对我来说似乎是一个很好的解决方案!

如果发生我忽略了某些事情,我会尝试这种方法并发布后续内容。这个问题将暂时开放,因为我不能这么快接受自己的答案。同时随时发布您的解决方案,我相信有更多的方法可以解决这个问题。

关于Knockout.js 模板范围的半全局变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14942270/

相关文章:

javascript - KnockoutJS 添加和循环可观察对象

javascript - 在不引起递归的情况下将两个 knockout 变量连接在一起

javascript - 如何取反 Array.protype.filter 函数

javascript - 在 MVVM View 模型中处理应用程序范围的元素

javascript - 在 Knockout JS foreach 循环中围绕每个 'n' 项放置一个容器

javascript - Durandal 小部件未绑定(bind) - 无错误

knockout.js - Knockout JS css "else"条件

jquery - 使用 jquery.tablesorter 和 jquery.tmpl 生成的表

knockout.js - 在 typescript 中声明一个 knockout 计算观察

javascript - 显示带有 knockout 功能的原始 api 数据