Skip to content

Instantly share code, notes, and snippets.

@Lavrend

Lavrend/index.js

Forked from DawidMyslak/index.js
Created January 13, 2021 21:38
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Lavrend/56d34921160c8e20b55a31d8723c94cf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Lavrend/56d34921160c8e20b55a31d8723c94cf to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Dawid Myslak revised this gist Oct 23, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -27,7 +27,7 @@ const bindingHandlerInit = async (element, valueAccessor) => {
    };

    // create new Vue instance
    const vm = new Vue(vueConfig);
    let vm = new Vue(vueConfig);

    // destroy Vue instance when KO component is disposed
    ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
  2. Dawid Myslak renamed this gist Oct 22, 2017. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → index.js
    View file
    File renamed without changes.
  3. Dawid Myslak created this gist Oct 22, 2017.
    52 changes: 52 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,52 @@
    // skip import for KO (Knockout.js) here, it should be available in global deps
    import Vue from 'vue';
    import ProjectsConversationWrapper from 'ProjectsConversationWrapper';
    import { getProjectConversation } from 'api';

    // unique component identifier
    const uniqueId = 'chat-project-room';

    const bindingHandlerInit = async (element, valueAccessor) => {
    const projectId = parseInt(ko.unwrap(valueAccessor()), 10);

    // find conversation based on given project ID
    const { conversation } = await getProjectConversation(projectId);
    const conversationId = conversation.id;

    // our reactive data object observed by Vue
    const data = {
    conversationId,
    };

    // Vue setup
    const vueConfig = {
    el: `#${uniqueId}`,
    data,
    template: '<ProjectsConversationWrapper :conversation-id="conversationId"/>',
    components: { ProjectsConversationWrapper },
    };

    // create new Vue instance
    const vm = new Vue(vueConfig);

    // destroy Vue instance when KO component is disposed
    ko.utils.domNodeDisposal.addDisposeCallback(element, () => {
    vm.$destroy();
    vm = null;
    });
    };

    // create custom binding
    ko.bindingHandlers.chatProjectRoom = {
    init: bindingHandlerInit,
    };

    // register new KO component
    ko.components.register(uniqueId, {
    viewModel: ({ projectId }) => ({ projectId }),
    template: `
    <div data-bind="chatProjectRoom: projectId">
    <div id="${uniqueId}"></div>
    </div>
    `,
    });