0

我正在尝试在我的项目中创建一个新的 ractive 组件,就像一个简单的测试用例一样。但是,当呈现包含该组件的部分时,我在 ractive.js 中收到一个错误,指出 Component.defaults 在该行中未定义

adapt = combineAdaptors( root, Component.defaults.adapt, Component.adaptors ); 

实际上,Component 对象中唯一的就是我添加的组件。

作为参考,我使用的是 Ractive.js 4.0。

// productComponent.js
define(['ractive', 'rv!accordion/productComponent'], function(Ractive) {

    var productComponent = {};

    // add module properties here
    productComponent.ProductComponent = Ractive.extend({

        template: productComponent,

        init: function(options) {
                console.log('init');
        },

        data: {

        }

    });

    Ractive.components.productComponent = productComponent.ProductComponent;

    return productComponent;
});

然后在父 ractive 中,我有:

components: {
    'productComponent': productComponent
}

其中 productComponent 是对 productComponent.js 文件的引用

模板使用它在循环中创建组件

{{#items:key}} 
    <productComponent product="{{product}}" />
{{/items}}
4

1 回答 1

0

您需要从 productComponent.js 返回productComponent.ProductComponent构造函数(而不是productComponent),如果这是在父级中引用它的方式(components:{}父级覆盖的选项Ractive.components.productComponent)。

此外,如果您使用的是 rv.js,您可以像这样引用模板:

// productComponent.js
define(['ractive', 'rv!accordion/productComponent'], function(Ractive, template) {

    var productComponent = {};

    // add module properties here
    productComponent.ProductComponent = Ractive.extend({

        template: template, // <---- note this...

        init: function(options) {
                console.log('init');
        },

        data: {

        }

    });

    Ractive.components.productComponent = productComponent.ProductComponent;

    return productComponent.ProductComponent; // <---- ...and this!
});
于 2014-08-21T16:00:34.600 回答