vue.js 다이내믹 구성 요소의 keep-alive와 함께 cytoscape.js를 사용하는 방법?

vue.js 다이내믹 구성 요소의 keep-alive와 함께 cytoscape.js를 사용하는 방법?

나는 Vue.js 2.0을 사용하여 단일 페이지 애플리케이션을 만들려고 한다.이 애플리케이션은 여러 가지 작동 모드를 제공하도록 되어 있는데, 나는 Vue.js 동적 구성요소를 사용하여 구현하고 싶었다.각 모드의 상태는 서로 전환하면서 보존되어야 하기 때문에, 나는 Vue.js가 제공하는 keep-alive 기능을 사용하기로 결정했다.모드 중 하나는 Cytoscape.js 를 사용하여 만든 네트워크 뷰로 되어 있다.

그리고 여기 내 문제가 있다.처음 전환할 때는 네트워크가 올바르게 초기화되지만, 앞뒤로 전환하면 네트워크 보기가 중지된다.keep-alive는 제대로 작동하며(내가 이해한 한), Cytoscape 인스턴스와 적절한 HTML 섹션을 모두 다시 불러온다.왠지 사이토스케이프 인스턴스와 HTML 섹션의 연결이 끊긴 것 같은데, 그 방법과 이유는 이해가 되지 않는다.

여기 예시 코드가 있다.

//sample data for network
var testElements = [
    { data: {id: 'a'} },
    { data: {id: 'b'} },
    { data: {
        id: 'ab',
        source: 'a',
        target: 'b' 
        }
    }
];
    
//Vue components
Vue.component('otherView', {
    template: '<div>This is another mode</div>'
});

Vue.component('network', {
    template: '<div id="container" class="cy"></div>',
    mounted: function () {
        cy1 = cytoscape({
            container: document.getElementById("container"),
            elements: testElements
        });
    }
});

//Vue dynamic component
var vm = new Vue({
    el: "#dynamic",
    data: {
        currentView: 'otherView'
    }
});

.cy {
    width: 500px;
    height: 500px;
    position: absolute;
    top: 100px;
    left: 10px;
}

<script src="https://rawgit.com/cytoscape/cytoscape.js/master/dist/cytoscape.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="dynamic" >
    <div id="selectorButton">
        <button id="button1" @click="currentView='otherView'">Other view</button>
        <button id="button2" @click="currentView='network'">Network</button>
    </div>

    <keep-alive>
        <component :is="currentView"></component>
    </keep-alive>

</div>

사이토스케이프 인스턴스를 제거하면 파괴된다.JSON: http://js.cytoscape.org/#cy.json에서 Vue가 DOM 요소를 파괴하지 않도록 하거나 매번 새 Cytoscape 인스턴스를 생성하지 않도록 하십시오.

나는 당신의 문제를 완전히 이해할 수 없었지만, 당신은 당신이 네트워크 컴포넌트의 마운트된 오퍼티에서 작성한 코드를 다음과 같이 활성화된 속성으로 옮겨볼 수 있다.

    Vue.component('network', {
        template: '<div id="container" class="cy"></div>',
        activated: function () {
            if(initial state){
                cy1 = cytoscape({
                    container: document.getElementById("container"),
                    elements: testElements
                });
            }

        }
    }); 

이것은 component가 유지될 때 도움이 될 수 있다. 즉, 탑재된 후크는 구성 요소를 처음 입력했을 때 한 번만 호출되며, 이후 입력 시 다시 호출되지 않는 반면, 활성 후크는 당신이 보관할 때 구성 요소를 입력할 때마다 호출되기 때문이다.

참조URL: https://stackoverflow.com/questions/43583264/how-to-use-use-cytoscape-js-in-combination-with-vue-js-dynamic-components-keep