Запустить внешнюю функцию при создании компонента выбивки - PullRequest
Новая
       40

Запустить внешнюю функцию при создании компонента выбивки

0 голосов
/ 15 октября 2018

Я пытаюсь создать новый компонент в нокауте: 

ko.components.register("categories", {
    viewModel: {
        instance: MY_VIEW_MODEL
    },
    template: require('html-loader?interpolate!./components/categories.html')
});

и мой HTML-блок внутри category.html : 

<div class="panel" data-bind="foreach: categories, afterRender: ${require('../effects.js').fadePanels()}"></div>

и внутри effect.js : 

function fadePanels() {
    $('.panel').velocity('fadeInPanels', {
        stagger: 250,
    })
}

плюс webpack.config.js :

    test: /\.html$/,
    loader: 'html-loader',
    options: {
        interpolate: true
    },
    exclude: /node_modules/

но это вообще не работает.Вот вывод из браузера (без ошибок в консоли): enter image description here

У вас есть опыт работы с этим?Вы знаете, как правильно с этим справиться?

1 Ответ

0 голосов
/ 15 октября 2018

Вы можете запустить функцию, которая принимает элемент компонента, используя фабричный метод createViewmodel.Эта функция получает информационный объект, который включает в себя текущий element.

ko.components.register("category", {
    viewModel: { 
      createViewModel: (params, info) => {
        fadeIn(info.element);
        return { label: "hello world" }
      } 
    },
    template: `<div data-bind="text: label"></div>`
});

const categories = ko.observableArray(["", "", ""]);
const addCat = () => categories.push("");

ko.applyBindings({ categories, addCat  });

function fadeIn(el) {
  el.classList.add("seeThrough");
  setTimeout(
    () => el.classList.add("fadeIn"), 
    200
  );
}
.seeThrough {
  opacity: 0;
  transition: opacity .25s ease-in-out;
}

.fadeIn {
  opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<ul data-bind="foreach: categories">
  <li data-bind="component: { name: 'category' }"></li>
</ul>

<button data-bind="click: addCat">add</button>

Для работы с компонентами и веб-пакетом вы можете проверить этот ответ Я написал несколько дней назад.В нем описывается, как настроить веб-пакет для работы с выбивающими компонентами.

...