Question

我正在尝试在我的项目中创建一个新的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;
});

然后在父母的反应中，我有：

components: {
    'productComponent': productComponent
}

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

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

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

Answer 1

你需要从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!
});

Component.defaults在创建ractive js组件时未定义

1 个答案: