标签: ractivejs

我正在使用Ractive.js和gridstack.js创建示例应用程序,但无法弄清楚如何将gridstack添加为装饰器.我认为这是向ractive.js添加jQuery元素的正确方法,请告知是否不是.

在我创建了一个装饰器并将其分配给Dashboard组件后,它实际上不起作用,并且事件来自组件gridstackDecorator中没有缓存Dashboard.

我用不起作用的代码创建了这个小提琴,源代码如下:

Ractive.js组件树将如下所示:

- App
|--- Dashboard    <-- GridstackDecorator
    |--- Widget
        |--- Widget container components
    |--- ...
    |--- Widget
|--- Other components

HTML模板看起来像:

<div id="app"></div>

<script>
window.__APP_INITIAL_STATE__ = {
    widgets: [
        {id: 1, name: "First widget", x:0, y:0, width:2, height:2},
        {id: 2, name: "Second widget", x:5, y:0, width:2, height:2},
        {id: 3, name: "Third widget", x:10, y:0, width:2, height:2},
     ],
};
</script>

我尝试分配给Dashboard组件的gridstack装饰器如下所示:

该update和teardown方法不会被调用,这是为什么？ …

我有一个包含多个字段的表单,其中一些用于纯文本,其中一些需要插件才能进行高级选择和上传功能.

这有两个问题:

• ractive需要解析模板并在我附加插件之前渲染它,因此会有一些小的延迟
• 第二个是这样的插件更改了所提到的字段周围的标记,并且无法使用ractive生成的DOM树,因为该标记不同步.

解决这个问题的正确方法是什么？我真的想使用ractive来绑定所有表单值并控制它的行为,但此时似乎几乎不可能.

我可以使用标签手动实例化(子)组件,但我不知道如何动态地执行它,或者,如何使用标签在同一区域中插入和删除不同的组件.

今天我以这种方式实例化每个(子)组件:

Ractive.load( '/templates/global/example.html' ).then( function ( Example )
{
       ractive.components.example = new Example( { el : 'aside' } );
});

但是新的(子)组件无法在胡子中看到它的父实例的数据,只能看到他自己的数据.

这是小提琴(抱歉警报)http://jsfiddle.net/PCcqJ/92/

var ractive = new Ractive({
    template: '#templateOne',
    partials: {
        aPartial: '<div>Oh look, the partial is rendered!</div>'
    }
});

function cb() {
    alert('but now we unrender');
    ractive.once('complete', function() {
        alert('we rendered again, and now you can\'t see the partial content');
    });
    ractive.render('container');
}

ractive.render('container');

ractive.once('complete', function() {
    alert('so we render the first time, and you can see the partial');
    ractive.unrender().then(cb);    
});

此处的部分不会重新渲染.为什么是这样？部分仍然在partials对象中,并且它们已被取消渲染,那么什么会阻止它们再次渲染？

这个小提琴渲染,渲染,然后重新渲染,每当其中一个发生时给你一个警报.

我正在尝试Paths.js网站http://andreaferretti.github.io/paths-js-demo/上的饼图演示的简化版本,以了解它与Ractive一起使用时的工作原理.我大部分都在本地工作,除了一个我无法解决的错误.

一个工作演示在https://codepen.io/alexlibby/pen/xjvOvQ - 我试图让国家名称和人口数字显示在饼图中的相关部分.目前,它在浏览器控制台中显示错误,并且未显示国家/地区名称/人口数据:

Error: <text> attribute x: Expected length, "{pie.sector.centroid[0]}"

我研究了我认为可能是什么问题(因为传递给质心属性的值是不正确的),但我很难理解它应该是什么.我已经检查了SO,找不到有类似问题的人.

我也在使用更新版本的Ractive和Path.js Pie插件 - 这可能会导致问题吗？我已经使用Browserify将Node依赖项组装成一个文件 - 我的源代码在JS部分的第5行开始,并在第26行结束.

有人可以帮我指点正确的方向吗？

我正在学习如何使用ractive并且无法解决问题,代码在以下jsfiddle.

我正在做的是对队列的计数器(数组中的最后一个对象是当前人):1.显示当前人的队列号的计数器2.显示队列大小的计数器

A)工作正常,但它是逻辑膨胀所以我试图将它转换为一个单独的变量,如B)所示,但它根本不更新.

我在代码中放置了一个观察者,以观察队列变量是否有任何变化.我希望每次点击"跳过当前人"或"删除当前人"时都会显示警报,但警报仅在我第一次加载页面时显示.

    ractive.observe({
      'queue.0.queueNo': alert('here')
    });

我的页面包含几个作为单独的AMD模块存在的组件.Require.js优化器将每个组件转换为单个文件.由于其中一些组件共享依赖项(例如jQuery和d3),因此优化器paths配置将CDN URL用于这些依赖项,而不是将它们捆绑到优化文件中.

这是它变得棘手的地方.我为Ractive.js编写了一个名为rvc.js 的模块加载器插件,它允许我包含HTML文件中定义的Ractive组件.(是的,我正在寻求有关如何使用我自己的库的帮助.)

这很好 - 这样的代码可以按照您的期望进行优化:

define( function ( require ) {
  var ChartView = require( 'rvc!views/Chart' );
  var view = new ChartView({ el: 'chart' });
});

因为Ractive被几个组件使用,所以应该从像jQuery和d3这样的CDN提供服务.但是在优化过程中rvc.js使用它,这意味着Ractive优化器paths配置的条目不能指向CDN - 它必须指向本地文件.

有没有办法告诉Require.js'在优化期间使用本地文件,但是在运行时从CDN加载'？

我喜欢在渲染ractive模板时提取一些远程数据.由于请求的异步性质,没有数据使其成为输出.我怎么能做到这一点？

 var ractive = new Ractive({
    debug: true,
        el: 'container',
        template: '#template',
        data: 
        {   
            chapters:chapters,
                    load_text: function(path)
                    {
                         $.get(path, function( text ) {                            
                             return text;
                          });
                    }                    
        }
 });

我一直在使用以下代码将新注释添加到列表末尾：

 ractive.push('BlogPosts.BlogPostId.Comments', newComment);

但现在我需要将一个项目添加到列表的开头。我查看了反应文档，但没有成功找到合适的方法。

我正在尝试使用 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 …