问题标签 [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 投票
3 回答
679 浏览

javascript - 具有多个值的 Ractive 双向绑定

我有多行无线电输入。用户必须从每一行中选择一个fixedpercentage从每一行中选择一个。IE

在此处输入图像描述

我在 ractive 文档中找不到最佳定义。

当我的 js 有 {name: 'foo', checked: true}

我的模板有

<input type="radio" name="{{name}}" value="fixed" checked="{{checked}}">Fixed

正如它所说的那样,我不能这样做

A radio input can have two-way binding on its name attribute, or its checked attribute - not both

您知道的任何地方是否有任何文档可以帮助我在输入元素中使用多个值。

或者我怎么能在 ractive 中做到这一点?

谢谢。

0 投票
1 回答
246 浏览

ractivejs - Ractive 过渡不适用于部分更新

更新:这是一个小提琴。它比我自己的真实应用程序好一点,但仍然突出了潜在的错误(或我的误解)。请注意,“outro”过渡不起作用。

http://jsfiddle.net/k4a81fza/1/

原来的:

这是我在父 Ractive 内部使用的部分内容:

以下是我尝试更新数据的方式(从代表详细视图的不同 ractive 更改):

模板中的<p>标签成功消失,但没有过渡。我尝试过其他过渡并调整了持续时间和延迟,但它总是会立即被删除。

理想情况下,我想要不同的 outro 和 intro 过渡,我认为我可以通过以下方式实现:

同样,这可以更新 中显示的项目值<p>,但没有过渡。

有没有办法完成我所追求的?

0 投票
2 回答
528 浏览

ractivejs - 如何在 ractivejs 模板中调用数组过滤器

所以我不想使用数据函数(假设我希望最终用户只与模板交互而不是硬编码 javascript。)如果我有这个包含n 个元素的数组,我该如何过滤它,以便我可以在 ractive中获取m个元素模板 ?现在我有这个代码>> http://jsfiddle.net/t168vymw/4/它不能正常工作。

要求:我不能使用某些函数进行过滤,例如 data: {filtersomething: function(){...} } ,而是让用户从模板中进行复杂的数组函数转换。活跃还支持这一点吗?

0 投票
1 回答
416 浏览

json - 在 Ractive 中,合并 2 个 json 文件并相应打印出来

第一次尝试 ractive 并得到错误。[Object object] 重复打印。试图将两个文件合并为一个(问题是集合和广告不同,那么如何将两者结合起来?)

广告和非广告将分别打印出来,即在freewall布局中应先打印广告项,然后再打印非广告项。

在代码中的某个地方我可能出错了。

活性模板

脚本

HTML

  1. 如何将两个json合二为一?它们将是两个不同的文件,因此稍后将从文件中提取 json。
  2. 广告不适用于有条件的印刷广告和非广告项目。在 ractive 网站上尝试了有条件的教程..
  3. 是否可以先打印广告项目,然后再打印非广告项目,然后再将它们布置在自由墙布局中(如果您不知道什么是自由墙, http : //vnjs.net/www/project/freewall/ ?

帮助将不胜感激。

更新:仍然有问题 继续看到测试消息 -

并且正在{{/if}}给出{{/each}}非法错误

在来自两个 url 的 json 文件中

页面上仍然没有显示任何内容 - 即使错误已得到纠正,也显示为空白。我想知道 json 文件是否是一个原因——因为我们无法访问 json 文件中的集合和广告?

请帮助并感谢它

0 投票
2 回答
521 浏览

javascript - RactiveJS 可使用鼠标事件拖动

我正在尝试使用代理事件(on-mousedown、up、move、out)使用 RactiveJS 实现一个简单的可拖动 DIV

跟随JSFiddle工作得很好,但是当用户移动鼠标太快时,拖动停止。这仅仅是因为在我的例子中,mouseevent 处理程序位于 DIV 标记而不是正文或文档元素上。我的最终想法是创建一个滑块组件,但是我正在寻求提供最佳的用户体验并使这项工作更像 JQuery 的可拖动。

模板:

活性实例:

如何改进上述代码?

0 投票
1 回答
87 浏览

javascript - 是否可以在 RactiveJS 中使用计算函数?

有没有办法用参数运行计算属性?几乎是一个计算函数。

JS代码

html

0 投票
1 回答
1440 浏览

ractivejs - 强制重新渲染组件

什么是完全拆除并在旧位置重新实例化组件的最佳方法,最好是从模板中?

我们的用例是我们有一堆在我们的视图中使用的 Backbone 模型/集合。我们可能会监听其中init一些模型或集合事件(有时很深),或者我们可能会做一些与该模型相关的设置工作。似乎我们有两个选择:监听视图上的整个模型属性是否发生变化,然后取消绑定任何事件并将它们绑定到新模型并重做任何设置工作,或者强制视图拆除并放置一个新的使用新模型,因为模板可能会发生显着甚至完全更改。我们选择后一条路线是因为变化的重要性,并确保我们从一个干净的视图开始。

到目前为止,我们一直在将组件包装在条件中并更改布尔值以强制旧组件拆除并重新渲染新组件:

HTML

JS

这是一种体面的方法,还是我们认为这一切都错了?似乎必须有更好的选择,特别是因为在我们应用程序的一些地方是必要的。

0 投票
1 回答
446 浏览

ractivejs - 在 ractive 中按类型排序

我遇到了教程部分:http ://learn.ractivejs.org/list-sections/5/

尝试使用选择和排序。

活性模板

HTML

活性脚本

希望能够选择任何类型,然后按类型排序,比如猫;它将列出猫并列出狗和仓鼠。

非常感谢您对 ractive 的任何见解/帮助!

更新

JSFIDDLE 演示

目前它不起作用,因为我认为动物和排序不正确

0 投票
2 回答
919 浏览

jquery-ui - Ractive 没有捕获来自 jquery-ui datepicker 的更改

我将 jquery-ui 的 datepicker 与 Ractive 模板一起使用,双向绑定似乎无法正常工作。

我的输入如下所示:

然后我通过“picker”装饰器实例化日期选择器:

日期选择器完美显示,但值没有正确更新。如果我在 {{value}} 上通过观察者,我会看到 Ractive 认为该值在由 datepicker 设置后并没有改变。如果我单击该字段,然后再次退出(失去焦点),观察者将触发,并设置值。

在我的装饰器中,我可以设置一个回调以使用 datepickers“onSelect”事件触发,但是如何从装饰器函数强制执行一个积极的更改事件?

0 投票
1 回答
435 浏览

javascript - RactiveJS 模板条件 HTML

我试图让 HTML 有条件地出现在 ractive 模板中,但没有成功。

正如您在这个JSFiddle中看到的那样,结果并不像预期的那样 - 表是单行。

我的模板:

我的Javascript: