标签: ractivejs

我正在尝试使用 Redux 为小示例应用程序设置 RactiveJS - 初始化仪表板（来自 AJAX），从仪表板添加/删除元素（小部件）（并在服务器上保存序列化数据）。因为有几乎专门针对 React 的教程，所以我需要建议。我遵循了一些并获得了目录结构，例如：

views
    app.html
    dashboard.html
    widget.html
js
    actions
        DashboardActions.js
    components
        Dashboard.js
        Widget.js
    constants
        ActionTypes.js
    reducers
        dashboard.js
        index.js
    app.js
index.html

这个例子有效，但有几个问题，我想弄清楚如何使它更好。例如：

1）如何传递（我应该传递？）存储和操作到 Ractive 组件树？现在它bindActionCreators在每个组件中使用，我认为这不是一个好的解决方案。

2) 将服务器的初始状态水化放在哪里？目前它是硬编码的reducers/dashboard.js，但我想使用后端作为数据源和数据保存端点。有中间件方法，但如果这是好的做法，那么如何将其应用到 RactiveJs 中？

3）我应该使用一个大的reducer还是每个组件一个reducer？

4）也许核心概念不正确，应该重构？

视图/app.html

<Dashboard dashboard={{store.getState()}} store="{{store}}"></Dashboard>

视图/dashboard.html

{{#with dashboard}}
<pre>
====
<a on-click="@this.addWidget('Added by click')" href="#">Add New</a>
{{#dashboard}}
    {{#each widgets}}
    <Widget id="{{this.id}}" name="{{this.name}}" size="{{this.size}}" actions="{{actions}}" store="{{store}}"></Widget>
    {{/each}}
{{/dashboard}}
====
</pre>
{{/with}}

视图/小部件.html

<div>{{id}}-{{name}} (Size: {{size}})<a href="#" on-click="@this.deleteWidget(id)">X</a></div>

动作/仪表板Actions.js …

假设我有两个模板:一个index包含我主要内容的changelog模板,一个包含更改日志的模板.它们被视为不同的模板:

<script id='index' type='text/ractive'>
// ...
</script>

<script id='changelog' type='text/ractive'>
// ...
</script>

ractive = new Ractive({...});

能够在运行中以编程方式在这些模板之间进行更改的最佳方法是什么？我以为我可以更改实例的template变量Ractive,即ractive.template = '#changelog';更改不更新output内容.理想情况下,我喜欢它,以便用户可以单击菜单中的按钮并在index和之间切换changelog.

在Python中,迭代为我提供了一个命名变量:

for cage in cages:
    for animal in cage.animals:
        print("The current cage is",cage)
        print("the current animal is",animal)

在Ractive模板中,我似乎无法执行此操作.

{{#cages}}
    {{#animals}}
         The current animal is {{.}} or {{this}},
         but I don't know how to refer to the current cage,
         i.e. the outer loop variable

         I would like to be able to say {{cage}} has an {{animal}}
    {{/animals}}
{{/cages}}

有没有我不知道的语法？

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

对于对象

{
  "items": [
    {"name": "red"},
    {"name": "green"},
    {"name": "blue"}
  ]
}

我想产生“红，绿，蓝”
我想知道我是否在最后一项，所以我可以知道是否打印分隔符。就像是：

{{#items:i}}{{name}} {{#i.is_last}},{{/i}}{{/items}}  

难道我做错了什么？

我的模板

   <select id="muni" class="form-control" value="{{formData.muni_ssn}}" on-select="muni_selected">
       {{#formData.municipalities}}
       <option value="{{ssn}}">{{name}}</option>
       {{/formData.municipalities}}
   </select>

我的js代码

var caseForm = new Ractive({
    el: "case-form",
    template: "#CaseFormTemplate",
    data: {
        formData: mappeal.caseFormData
    }
});

caseForm.on("muni_selected", function (event) {
   alert(event.context.formData.muni_ssn);
});

我试图用RactiveJS利用代理事件(on-mousedown,up,move,out)实现一个简单的可拖动DIV

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

模板:

<div class="rect {{drag ? 'dragging' : ''}}" 
         on-mousedown="startDrag"
         on-mouseup="stopDrag" 
         on-mouseout="stopDrag" 
         on-mousemove="drag"
         style="top:{{top}}px; left:{{left}}px;">
</div>

反应实例:

var ractive = new Ractive({
    el: "#content",
    template: "#template",
    data: {left:20,top:80}
});
ractive.on({
    startDrag : function (event) {
        this.set({
            'drag': true,
            'mouseX': event.original.clientX - this.get('left'),
            'mouseY': event.original.clientY - this.get('top')
        });
    },
    stopDrag : function (event) {
        this.set('drag', false);
    },
    drag : function (event) {
        if(this.get('drag')) {
            var x = event.original.clientX, 
                y = event.original.clientY;
            this.set({
                top: y - this.get('mouseY') ,
                left: …

我最近开始尝试Ractive.js.我对它的组件特别感兴趣.我立即注意到的一件事是许多例子都在使用该init选项.但是,当我尝试init在我的代码中使用时,我会收到弃用通知,然后建议使用onrender.onrender然而init,其中的例子少得多,而且一些功能this.find在内部没有onrender.我查看了Github问题,但是没有找到任何有关此更改背后的推理或者选择特定于组件的元素的建议路径是什么.

我创建了一个测试笔来尝试使用新API创建一个递归组件,但我不得不求助于使用jQuery和一个未记录的fragmentapi来选择我需要操作的特定DOM节点.我觉得这反对Ractive期望你做的事情,但我无法弄清楚现有文档对我的期望.

期望init和onrender选项之间的主要区别是什么以及如何onrender处理组件中的特定元素及其事件的操作？

ractive.set方法返回一个promise.当执行简单的设置操作(单个值或映射)然后通过ractive.get立即引用新值时,是否建议使用promise？或者这是完全没必要的？

我一直在逃避承诺,发现我不需要它,但也许我到目前为止幸运.这是我的意思的一个例子:

ractive.set("foo", "bar");
console.log(ractive.get("foo"));   // always outputs the correct value "bar"

我担心设置操作是异步的,这在较慢的机器上或者如果我开始使用Ractive的更高级功能时会变得明显.

根据Ractive文档:

[ractive.set]返回将在set操作和任何转换完成后调用的Promise .

基于此,我想知道这个承诺是否真的适用于转型后的工作.

我slim在 sinatra 应用程序中使用模板，并ractive.js在客户端使用类似句柄的语法。

我将模板代码保留在script标签内，但 slim 尝试像文件的其余部分一样解析它们。我的简化代码如下所示：

section.header-section
  h1 Items
section.main-section
script#items type="text/html"
  <ul class="items">
    {{#each items}}
      <li>{{title}}</li>
    {{/each}}
  </ul>

对于此代码 slim 解析器返回一个错误：Unknown line indicator ... Line 29, Column 14 {{#each items}} ^。

我尝试了建议的解决方法：

set :slim, {:pretty => true, :attr_list_delims => {'(' => ')', '[' => ']'}, :code_attr_delims => {'(' => ')', '[' => ']'}}

这没有帮助。所以我需要slim忽略里面的所有内容，script保留缩进以提高可读性。唯一可能的解决方案是创建我自己的嵌入式引擎，并且实际上在其中不执行任何操作。还有其他方法可以修复吗？

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

<input type="radio" name="{{myVar}}" value="1" checked>

在模板中,但名称上的花括号仍保留在html中.是否有一种聪明的方式来输出它

<input type="radio" name="myVar" value="1" checked>

在HTML中,所以我不必改变表单处理？我已经尝试了一些逻辑

<input type="radio" name="myVar" value="1" {{#myVar==1}}checked{{/myVar==1}}

但那并没有约束力.

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

data:{myVar:1}

然后按钮没有被检查？