Vue bind dopo i carichi parziali AJAX?

Question

Sono appena iniziato con Vue.js e sto provando a incorporarlo in un'app che sto costruendo da un po '. La mia app è costruita usando Laravel, una buona quantità di jQuery, ecc.

Tutti i miei elementi di navigazione nella mia app utilizzano AJAX (non via Vue) per restituire viste parziali. Quindi qualsiasi link interno o modulo di invio viene inviato tramite AJAX a una rotta di Laravel che restituisce un parziale.

Ho impostato la mia prima istanza di Vue ma si lega solo all'elemento la prima volta che il visitatore visita la pagina in cui viene utilizzata l'istanza di Vue. L'istanza di Vue esiste ancora, ma perde il suo legame con l'elemento quando l'utente si allontana dalla pagina e poi torna indietro - presumibilmente perché l'elemento è stato rimosso dal DOM quando l'utente è andato via.

Come si ottiene Vue per eseguire il binding all'elemento quando ritorna al DOM (tramite un caricamento AJAX non eseguito da Vue)?

miei main.js (consumati da 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'); 
       }); 
     } 
    } 
}); 

Il codice che consumano, che è un parziale/modello che viene restituito tramite la tecnologia 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 

Nota che funziona su un aggiornamento completo pagina, ma se ci si dirige verso un'altra pagina (ancora una volta che è una chiamata AJAX) quindi ritorno a questa vista, vedo solo {{$ data | json}} ... Sembra che Vue abbia perso il legame con l'elemento dell'app. Come posso riaverlo?

Ho provato a collegare l'istanza di Vue a un elemento che non lascia mai il DOM e quindi ha creato un componente ma ottengo lo stesso risultato ... il componente viene visualizzato su un aggiornamento della pagina completa ma non quando il partial viene caricato tramite AJAX.

Ho anche provato a fare casino. $ Mount, ma non ha avuto alcun effetto.

Answer 1

Ecco un esempio di un modo per fare quello che vuoi, ma credo che questo non è raccomandato dal creatore di Vue:

genitore dichiarazione di istanza vue:

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

Questa parte potrebbe essere nella funzione di successo della vostra chiamata AJAX:

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

ero in grado di ottenere questo lavoro cambiando il mio Status.js di restituire una chiusura:

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

E nella parte sceneggiatura del parziale, che viene restituito tramite la tecnologia AJAX sono in grado di creare una nuova istanza:

var MaintenanceStatus = window.MaintenanceStatus(); 

... 

MaintenanceStatus.getStatus(href, data); 

Answer 3

vi consiglio di dare un'occhiata al gancio hereactivate.

Dal Doc:

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

Fondamentalmente chiamano done() quando i dati sono pronti. Il componente verrà quindi inserito