Meteor應用程序的雙向數據綁定

Question

我已經構建了一個基於表單的應用程序。我希望讓用戶能夠部分填寫表格，如果他們目前無法完成，請稍後再回來。我使用鐵路路由器爲每個表單實例創建一個唯一的URL，以便他們可以回到鏈接。我的問題是Meteor不會自動保存輸入中的值，並且在重新訪問/刷新時，表單會變爲空白。我嘗試了下面的解決方案，將數據存儲在一個名爲「NewScreen」的單獨的Mongo集合中的臨時文檔中，然後每當模板被重新呈現以自動填充表單時引用該文檔。但是，我不斷收到一個錯誤，我試圖引用的元素是「未定義」。奇怪的是，有時它起作用，有時它不起作用。我試過設置一個遞歸setTimeout函數，但在失敗的時候，這也不起作用。任何有識之士將不勝感激。或者，如果我要對此都錯了，隨時提出了不同的方法：

Screens = new Meteor.Collection('screens') //where data will ultimately be stored 
Forms = new Meteor.Collection('forms') //Meteor pulls form questions from here 
NewScreen = new Meteor.Collection('newscreen') //temporary storage collection 
Roles = new Meteor.Collection('roles'); //displays list of metadata about screens in a dashboard 

//dynamic routing for unique instance of blank form 
Router.route('/forms/:_id', { 
    name: 'BlankForm', 
    data: function(){ 
    return NewScreen.findOne({_id: this.params._id}); 
    } 
}); 

//onRendered function to pull data from NewScreen collection (this is where I get the error) 
Template.BlankForm.onRendered(function(){ 
    var new_screen = NewScreen.findOne({_id: window.location.href.split('/')[window.location.href.split('/').length-1]}) 
    function do_work(){ 
    if(typeof new_screen === 'undefined'){ 
     console.log('waiting...'); 
     Meteor.setTimeout(do_work, 100); 
    }else{ 
     $('input')[0].value = new_screen.first; 
     for(i=0;i<new_screen.answers.length;i++){ 
     $('textarea')[i].value = new_screen.answers[i]; 
     } 
    } 
    } 
    do_work(); 
}); 

//onChange event that updates the NewScreen document when user updates value of input in the form 
'change [id="on-change"]': function(e, tmpl){ 
     var screen_data = []; 
     var name = $('input')[0].value; 
     for(i=0; i<$('textarea').length;i++){ 
     screen_data.push($('textarea')[i].value); 
     } 

     Session.set("updateNewScreen", this._id); 

     NewScreen.update(
      Session.get("updateNewScreen"), 
      {$set: 
      { 
       answers: screen_data, 
       first: name 
      } 
      }); 
     console.log(screen_data); 
    } 

Answer 1

如果你undefined，這可能意味着findOne（）沒有發現與在從傳遞的ID的newscreen網址。要調查此問題，請添加一條額外的線，如console.log(window.location.href.split('/')[window.location.href.split('/').length-1], JSON.stringify(new_screen)); 這會爲您提供來自網址的Id和找到的new_screen。

因爲您使用了IR，所以我會推薦使用Router.current().location.get().path而不是window.location.href。

如果你正在尋找客戶端的雙向綁定，看看Viewmodel for Meteor。