问题标签 [ractivejs]

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 投票
4 回答
2619 浏览

ractivejs - 确定 ractive 模板中的最后一个循环索引

基本上我想要这个:在 Mustache 模板中是否有一种优雅的方式来表达没有尾随逗号的逗号分隔列表?在 Ractive 模板中。

对于对象

我想生产“红、绿、蓝”
我想知道我是否在最后一项,这样我就可以知道是否打印分隔符。就像是:

0 投票
2 回答
489 浏览

ractivejs - 魔术模式忽略对自定义对象的更新

请参阅此笔以获取问题的演示(基于教程中的幻灯片)。当单击“下一步”和“上一个”箭头时,您会注意到imgIndexmustache 正确更新,但表达式 mustache 例如<p>{{ curImageCaption() }}</p>不识别它们的值何时发生变化。

也就是说,对象发生了变异,因此如果重新评估表达式,胡子值会发生变化,但 ractive 似乎没有意识到这一点。有没有办法让它工作,除非写适配器?我是否误解了魔术模式的工作原理?有趣的是,即使我ractive.update()在事件处理程序内部显式调用,ractive 仍然没有响应。

更新新信息

经过更多的摆弄,我想出了这个让它工作的技巧。hack 是要改变,例如,<p>{{ curImageCaption() }}</p><p>{{ curImageCaption(imgIndex) }}</p>mustache 表达式添加一个简单的原语,以便 ractive 了解如何正确观看。

我想我知道现在发生了什么,但是必须显式地向包含更改原语的 mustache 表达式添加参数,这违背了拥有单独域对象的大部分目的——也就是说,现在你在编码你的域对象时考虑到了 ractive,使用更改原语是一种基本的发布/订阅机制,用于通知 ractive 更改。

必须在我的自定义对象上创建一个真正的 pub/sub 机制,然后 ractive 然后显式订阅,这很好。问题是,正如我在 OP 中指出的那样,即使通过 ractive 收到更改通知ractive.update(),它仍然不知道它应该重新计算胡须,除非我使用假参数 hack。因此,尚不清楚应该注册什么回调 ractive 以使一切正常。

我不太了解 ractive 的内部工作来做到这一点,但我怀疑需要的是直接使用这些_deps东西的能力,并手动触发表达式的重新计算。如果这听起来正确,将不胜感激提供如何实现它的示例。

更新 2——一个不错的解决方案

这是一个不太老套的解决方法的概念证明

这个想法是使用 ECMA5 属性来装饰您的自定义域对象,提供委托给您想要使用但在 ractive 模板中不起作用的现有方法的属性。otoh的属性工作得很好。

因此,我们不再<p>{{ curImageCaption() }}</p>简单地编写<p>{{ imageCaption }}</p>,然后像这样装饰我们的自定义域对象:

这种装饰,在我的演示中有点冗长,可以通过创建一个辅助方法来轻松精简.

注意:此方法的一个缺点是您必须ractive.update()在事件处理程序中手动调用。我想知道是否有办法解决这个问题。如果没有,这会对性能造成多大的影响?它是否违背了 ractive 手术更新的全部目的?

更新 3——更好的解决方案?

这支笔采用了另一种方法,其中通过通用调度程序对象(实现的对象notify())将我们的自定义域模型与 ractive 链接起来。我认为这是迄今为止我最喜欢的方法....

它类似于官方的ractive 适配器,但我们使用 DI 将非官方的 ractive 适配器传递给我们的域对象,而不是包装我们的对象。乍一看,我们似乎在“为 ractive 编码”,但实际上这只是部分正确。即使我们使用另一个框架,我们也需要使用一些通知机制来广播对我们的视图模型的更改,以便视图可以对其做出反应。这种 DI 方法似乎比官方的 ractive 适配器需要更少的样板文件,尽管我对它们的理解不够好,无法确定这一点。它也不像官方适配器那样完全通用。

来自笔的代码为后代

HTML

JS

0 投票
3 回答
233 浏览

javascript - Ractive 的代理负载是如何工作的?

我想知道 Ractive 生成​​的 DOM 元素何时准备就绪。就我而言,我想使用 jquery 将自动完成功能附加到元素上。理想情况下,它会是这样的:

模板:

Javascript:

但是,即使我记得在文档中的某处提到了代理负载,该事件也不会触发。做我想做的事情的正确方法是什么?谢谢。

0 投票
1 回答
2061 浏览

react-jsx - RactiveJS 和 JSX

RactiveJS 与 JSX 兼容吗?

我猜有些标记不兼容。我喜欢强类型的想法,并且能够在 JavaScript 源代码中干净地编写模板。也许这被认为是糟糕的设计?

0 投票
2 回答
200 浏览

ractivejs - 引用 Ractive 组件的文本

我想在两个文本字段的长度 > 0 时启用一个按钮:如何参考这些文本字段的长度来表达这一点?看起来很简单,但对我来说如何引用组件及其文本(长度)并不明显。我基本上想使用 FRP 来启用/禁用表单提交按钮。我想这些将是“兄弟”组件。

0 投票
0 回答
168 浏览

ractivejs - 我在哪里编写代码以在更新 Ractive 组件使用的数据时调用?

圆环图Ractive 示例中,我可以使用以下内容更新组件图下方的文本:

但是,如果我尝试更新图表使用的数据:

什么都没发生。

这大概是因为 JS 中定义的都是一个init方法。我应该添加什么方法来更新数据?或者我是否需要在数据中添加观察者init?我想添加一种在旧数据和新数据之间转换/动画的方法。

我尝试猜测添加一个update方法,但没有调用。

0 投票
1 回答
377 浏览

ractivejs - RactiveJS 嵌套列表展开/折叠子项

我一直在玩 ractive.js 并试图了解它的能力。我有一个相当常见的例子,一个带有一些内部状态逻辑的视图,我想清楚地跟踪它。在完成教程之后,这似乎是 Ractive 非常擅长的事情,但我很难弄清楚这一点。


更新:我根据我得到的第一个答案中的反馈修改了下面的测试用例,以澄清我遇到的确切问题。你可以在这里看到完整的例子:http: //jsfiddle.net/e7Mjm/1/

首先,我有一个活跃的模板:

我有一些简单的 CSS 样式来格式化它:

以及以下 Javascript 使其全部工作:

如果您尝试使用 JS Fiddle,您会看到模板正确呈现,但交互行为不太正确:如果您单击a.expand它确实会打开该部分,但它也会更改所有其他a.expand图标的类,而不仅仅是一个被点击的。

这是我一直遇到的真正问题,在 ractive 事件绑定中,我似乎不是一个很好的方法来定义只影响用户正在与之交互的特定数据对象的交互,而是交互似乎影响所有数据。

对如何正确确定范围有任何见解吗?

0 投票
2 回答
96 浏览

javascript - 异步加载模块属性

我已经定义了一个模块(module1),它应该异步加载属性的值。我如何才能在我的应用程序中使用这个属性,一旦它被定义并且只有在它被定义之后?

我的设置(简化)

v1

应用程序.js

模块1.js

值/person.json

这仅在 GET 几乎瞬间发生时才有效,否则它会失败,因为在调用 getPersonName 时 _person 未定义。

v2

为了解决这个问题,我想我会注册一个回调,以便在加载人员时通知应用程序。

应用程序.js

模块1.js

如果 GET 很慢,这可以工作,但是,如果它很快 _onLoaded 在.done()被调用时是未定义的。

有没有一种好方法可以在定义后立即在 app.js 中使用 _person 值,并且仅在定义后才使用?

我正在使用 RequireJS,但我的问题通常适用于 AMD。

编辑

为了简化我的示例,我删除了一个可能很重要的层。我正在为 UI 使用 RactiveJS。

设置(稍微简化)

应用程序.js

编辑 2

我目前的解决方案,可能会发生变化。注册一个回调,在加载人员时通知 app.js。如果在注册回调时已加载人员,则立即调用回调。

应用程序.js

模块1.js

0 投票
1 回答
788 浏览

javascript - Ractive.js 中的多维数组

我一直在玩奇妙的 Ractive.js 库(不要与 Facebook 的Reactive .js 混淆)。我发现您可以使用以下模板代码渲染二维:

这完全符合我的预期,内部cell-click事件返回正确的密钥路径(例如frameContainer.2.4)。

然后我想把它变成一个三维数组(添加一个“时间”轴)。但是,以下方法不起作用:

wheretime代表当前时间值(它一次只会显示一个“时间” - 当你这样说时似乎很明显......)。

这......有点作品。它按应有的方式显示网格,但返回的cell-click事件键路径不再正确,返回类似于${frameContainer-time-8-}.2- 的东西,它已经失去了time值(并且有点奇怪)。

显然,我可以通过使用currentFrame渲染并切换的值来做到这一点ractive.set(),但这似乎不太优雅。有没有办法纯粹在模板中做到这一点?而且,如果不是,那么最有效的方法是什么?

谢谢!

0 投票
2 回答
1221 浏览

javascript - Ractive 单选按钮绑定 - 保留名称

我知道要将 ractive 变量绑定到单选按钮,最简单的方法是

在模板中,但名称上的大括号保留在 html 中。有没有聪明的方法让它输出

在 html 中,所以我不必更改表单处理?我已经尝试了一些逻辑

但这没有约束力。

另外,不太重要的是,有没有办法将它绑定为数值,就好像我有

然后按钮没有被检查?