Open zjjott opened 9 years ago
I use Vue for "Assembly line" program model:
this is runnable code: http://jsfiddle.net/zhulegequ/unuj00fu/3/
<div class="col-lg-4 col-xs-6" > <div class="panel panel-inverse" id="search"> <div v-component="search-form"> </div> </div> </div> <div class="col-lg-4 col-xs-6" id="user-info"> <div v-component="user-info"> </div> </div> <script type="text/template" id="searchForm"> <div class="panel-body"> <div class="input-group"> <input type="text" class="form-control" name="search" placeholder="Input for search" v-model="search" v-on="keyup:startSearch | key 13"> <div class="input-group-btn"> <button type="button" class="btn btn-success" v-on="click:startSearch"> Search </button> </div> </div> <ul v-if="error" class="parsley-errors-list filled"> <li v-text="error"> </li> </ul> </div> </script> <script type="text/template" id="userInfoTemplate"> <div class="panel panel-inverse" id="search"> <table class="table table-condensed"> <tbody> <tr> <th>username</th> <td v-text="name"></td> <th>Email</th> <td v-text="email"></td> </tr> </tbody> </table> </div> </script>
FormComponent = Vue.extend template: $('#searchForm').html() data: error:null methods: startSearch:(e)-> self=@ $.ajax method:"post" url:"/echo/json/" data: json:JSON.stringify name:self.search email:"#{self.search}@email.com" .success (respon)-> new UserInfoComponent#why not Vue el:"#user-info" data:respon UserInfoComponent = Vue.extend template: $('#userInfoTemplate').html() methods: reload:-> console.log "reload click" setData:(data)-> @$data=data compiled:-> console.log "compiled" @$log() Vue.component('search-form',FormComponent) Vue.component('user-info',UserInfoComponent) formview = new Vue#why not FormComponent? el:"#search"
at the ajax callback, why new UserInfoComponent work, instead ofnew Vue?
new UserInfoComponent
new Vue
new UserInfoComponent also works.
new Vue is like "bootstrapping" because you need a root-level vm to kickstart the compilation.
I use Vue for "Assembly line" program model:
this is runnable code: http://jsfiddle.net/zhulegequ/unuj00fu/3/
at the ajax callback, why
new UserInfoComponent
work, instead ofnew Vue
?