AJAX आंशिक भार के बाद बाध्य करें?

Question

मैं सिर्फ Vue.js के साथ शुरुआत कर रहा हूं और इसे एक ऐप में शामिल करने की कोशिश कर रहा हूं जिसे मैं थोड़ी देर के लिए बना रहा हूं। मेरा ऐप लैरवेल, jQuery की उचित मात्रा, आदि का उपयोग करके बनाया गया है।

मेरे ऐप में मेरे सभी नेविगेशन तत्व आंशिक विचारों को वापस करने के लिए AJAX (Vue के माध्यम से नहीं) का उपयोग कर रहे हैं। तो AJAX के माध्यम से एक लार्वा मार्ग पर कोई भी आंतरिक लिंक या फॉर्म सबमिशन सबमिट किया जाता है जो आंशिक लौटाता है।

मैंने अपना पहला वू इंस्टेंस सेट अप किया है, लेकिन यह केवल उस तत्व को बांधता है जब विज़िटर उस पृष्ठ को हिट करता है जहां वू इंस्टेंस का उपयोग किया जाता है। वू इंस्टेंस अभी भी मौजूद है लेकिन जब यह उपयोगकर्ता पृष्ठ से दूर जाता है तो यह तत्व के लिए बाध्यकारी हो जाता है और फिर वापस आता है - संभवतः क्योंकि उपयोगकर्ता को नेविगेट करते समय डीओएम से तत्व हटा दिया गया है।

जब मैं डोम पर लौटता हूं तो तत्व को वापस बांधने के लिए वू कैसे प्राप्त करूं (एक AJAX लोड के माध्यम से जो वू द्वारा नहीं किया जाता है)?

मेरे main.js (अमृत/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'); 
       }); 
     } 
    } 
}); 

लेने वाली कोड है जो कि 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 

ध्यान दें कि यह एक पूर्ण पृष्ठ रीफ्रेश पर काम करता है लेकिन यदि मैं किसी अन्य पृष्ठ पर नेविगेट करता हूं (फिर यह एक AJAX कॉल है) तो मैं इस दृश्य पर वापस लौटता हूं, मैं बस {{$ डेटा | देखता हूं जेसन}} ... ऐसा लगता है कि यह ऐप तत्व के लिए बाध्यकारी है। मैं इसे वापस कैसे लूं?

मैंने वू इंस्टेंस को उस तत्व पर बाध्य करने का प्रयास किया जो कभी भी डोम नहीं छोड़ता है और फिर एक घटक बनाता है लेकिन मुझे एक ही परिणाम मिलता है ... एक पूर्ण पृष्ठ पर घटक प्रस्तुत होता है लेकिन जब आंशिक लोड नहीं होता है AJAX।

मैंने $ माउंट के साथ गड़बड़ करने की भी कोशिश की, लेकिन इसका कोई प्रभाव नहीं पड़ा।

Answer 1

यहाँ एक ही रास्ता का एक उदाहरण आप क्या चाहते करने के लिए है, लेकिन मेरा मानना ​​है कि इस Vue के निर्माता द्वारा अनुशंसित नहीं है:

माता पिता Vue उदाहरण घोषणा:

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

यह हिस्सा हो सकता है अपने 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

मैं अपने Status.js बदलते एक बंद वापस जाने के लिए द्वारा इस काम के प्राप्त करने में सक्षम था:

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

और आंशिक ajax के माध्यम से लौटे हो जाता है कि मैं एक नया उदाहरण बनाने में सक्षम हूँ की स्क्रिप्ट हिस्से में:

var MaintenanceStatus = window.MaintenanceStatus(); 

... 

MaintenanceStatus.getStatus(href, data); 

Answer 3

मैं सुझाव है कि आप activate हुक here पर एक नज़र ले जा।

डॉक्टर से:

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

मूल रूप से done() फोन जब डेटा तैयार है। घटक को