Component.defaults undefined при создании компонента ractive js

Я пытаюсь создать новый реактивный компонент в своем проекте, как простой тестовый пример. Однако, когда отображается раздел, содержащий компонент, я получаю сообщение об ошибке в 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}}

ractivejs
person Siriustuck13    schedule 21.08.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно будет вернуть конструктор productComponent.ProductComponent (а не productComponent) из productComponent.js, если это то, как он упоминается в родительском элементе (параметр 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!
});
person Rich Harris    schedule 21.08.2014
comment
Работал отлично! Спасибо. Я знал, что это, вероятно, что-то простое. - person Siriustuck13; 21.08.2014