Vue bind po częściowym obciążeniu AJAX?

Question

Właśnie zaczynam od Vue.js i próbuję włączyć go do aplikacji, którą budowałem przez jakiś czas. Moja aplikacja jest zbudowana przy użyciu Laravel, spora ilość jQuery itp.

Wszystkie moje elementy nawigacyjne w mojej aplikacji używają technologii AJAX (nie poprzez Vue) do zwracania częściowych widoków. Tak więc każdy link wewnętrzny lub formularz jest przesyłany za pośrednictwem AJAX do trasy Laravel, która zwraca część.

Skonfigurowałem moją pierwszą instancję Vue, ale wiąże się ona z elementem tylko za pierwszym razem, gdy odwiedzający trafi na stronę, na której jest używana instancja Vue. Instancja Vue nadal istnieje, ale traci połączenie z elementem, gdy użytkownik odejdzie od strony, a następnie wraca - prawdopodobnie dlatego, że element został usunięty z DOM, gdy użytkownik odszedł.

W jaki sposób uzyskać Vue, aby powrócić do elementu, gdy wraca do DOM (przez obciążenie AJAX, które nie jest wykonywane przez Vue)?

Moi main.js (spożywane przez Elixir/Browserify):

window.MaintenanceStatus = require('./components/Status.js'); 

Status.js

var Vue = require('vue'); 
Vue.use(require('vue-resource')); 

module.exports = new Vue({ 
    el: '#app', 

    data: { 
     message: '' 
    }, 

    ready: function() { 
     this.message = 'loading ...'; 
    }, 

    methods: { 
     setMessage: function(message) { 
      this.message = message; 
     }, 

     getStatus: function(url, data) { 
      this.message = 'loading ...'; 
      this.$http.get(url, data) 
       .success(function(result) { 
        console.log('Status get success'); 
        this.setMessage(result); 
       }) 
       .error(function() { 
        console.log('Status get error'); 
        this.setMessage('Error'); 
       }); 
     } 
    } 
}); 

spożywania kod, który jest częściowym/szablon, który jest zwracany przez AJAX ...

@extends('layouts.partials.content') 


@section('content') 
    <div id="app"> 
     <pre>@{{ $data | json }}</pre> 
    </div> 
@stop 

@section('javascript') 
<script type="text/javascript" class="document-script"> 
$(function() 
{ 
    var href ... 
    var data {...} 

    MaintenanceStatus.getStatus(href, data); 
}); 
</script> 
@stop 

Zauważ, że to działa na pełnej odświeżania strony, ale jeśli przejść do innej strony (znowu to wywołanie AJAX) następnie wracam do tego widoku, widzę tylko {{$ dane | json}} ... Wygląda na to, że Vue stracił powiązanie z elementem aplikacji. Jak mogę to odzyskać?

Próbowałem powiązać instancję Vue z elementem, który nigdy nie opuścił DOM, a następnie utworzył komponent, ale otrzymałem ten sam wynik ... komponent renderuje na pełnym odświeżeniu strony, ale nie po załadowaniu częściowej przez AJAX.

Próbowałem też bawić się z. $ Mount, ale to nie miało żadnego efektu.

Answer 1

Oto przykład jeden sposób, aby robić to, co chcesz, ale wierzę, że nie jest to zalecane przez twórcę Vue:

rodzic deklaracja instancji vue:

window.vm = new Vue({...}) 

Ta część może być w funkcji sukcesu Twojej ajax rozmowy:

var newContent = $(response.new_content_html).wrap('<div></div>'); 

$('#some-container-for-the-dynamic-content').html(newContent); 
var newContentInstance = window.vm.$addChild({ 
    el: '#some-container-for-the-dynamic-content', 
    data: function data() { 
      return { emptyRecordData: {} }; 
    } 
}); 
newContentInstance.$mount(); 
newContentInstance.$data.someOtherData = response.some_other_data; 

Answer 2

udało mi się uzyskać tej pracy poprzez zmianę mojego Status.js wrócić zamknięcie:

module.exports = function() { return new Vue({...}) } 

I w części skryptu częściowego który zostanie zwrócony przez AJAX Jestem w stanie utworzyć nową instancję:

var MaintenanceStatus = window.MaintenanceStatus(); 

... 

MaintenanceStatus.getStatus(href, data); 

Answer 3

Polecam przyjrzeniu haka hereactivate.

Z Doc:

component = { 
    activate: function (done) { 
    var self = this 
    loadDataAsync(function (data) { 
     self.someData = data 
     done() 
    }) 
} 

Zasadniczo zadzwonić done() gdy dane jest gotowy. Komponent zostanie następnie wstawiony