幾個視圖的一個主幹模型，誰處理fetch（）？

Question

在幾個視圖之間共享Backbone模型是一種相當普遍的情況。儘管如此，假設這個模型是UserModel。它處理幾種方法，允許用戶註冊或登錄。

而且當用戶登錄時，調用fetch來獲取用戶的數據。因此，該模型無法使用initialize方法中的this.fetch()自取。

它應該從哪裏取？怎麼樣？

這是我們簡單UserModel：

const UserModel = Backbone.Model.extend({ 
    // get url for 'me' (ie connected user) 
    url() { 
     return app.endpoint + '/users/me/' + app.conToken; 
    }, 

    login(email, password, rememberMe, callback) { 
     … 
    }, 

    signup(email, password, firstname, lastname, callback) { 
     … 
    } 
}); 

現在讓我們假設它是由兩個共享：

HomeView & CartView

app.HomeView = Backbone.View.extend({ 
    template: app.tpl.home, 

    initialize() { 
     // model is passed @ instanciation 
     this.model.fetch(); 
     this.listenTo(this.model, 'sync', this.render); 
    }, 

    render() { 
     … 
    } 
}); 


app.CartView = Backbone.View.extend({ 
    template: app.tpl.cart, 

    initialize() { 
     // model is passed @ instanciation 
     this.model.fetch(); 
     this.listenTo(this.model, 'sync', this.render); 
    }, 

    render() { 
     … 
    } 
}); 

現在，如果我實例化HomeView，userModel將是牽強。但是如果在稍後的時間點，我會立即使用CartView，這個模型會再次被提取。這使得一個無用的http請求。

基本上，模型可以在成功調用其login方法後自動獲取，但用戶可以到達頁面或重新加載已登錄的瀏覽器。此外，用戶可以登陸任何頁面，但無法說他要在CartView之前去HomeView。

我看到兩個選項。無論是UserModel巧妙地處理多個fetch調用，像這樣：

const UserModel = Backbone.Model.extend({ 
    // get url for 'me' (ie connected user) 
    url() { 
     return app.endpoint + '/users/me/' + app.conToken; 
    }, 

    isSync() { 
     // an hour ago 
     let hourAgo = Date.now() - 3600000; 

     // data has been fetched less than an hour ago 
     if (this.fetchTime && hourAgo > this.fetchTime) return true; 
     return false; 
    }, 

    fetch() { 
     // has not already fetched data or data is older than an hour 
     if (!this.isSync()) { 
      this.fetchTime = Date.now(); 
      this.fetch(); 

      return; 
     } 

     // trigger sync without issuing any http call 
     this.trigger('sync'); 
    }, 

    … 
}); 

這樣的話，我能叫this.model.fetch()多次需要，是在視圖中無狀態的。

或者，我可以處理一個視圖層上：

app.HomeView = Backbone.View.extend({ 
    template: app.tpl.home, 

    initialize() { 
     // model is passed @ instanciation 

     // fetch model if empty 
     if (_.isEmpty(this.model.changed)) this.fetch(); 

     // render directly if already populated 
     else this.render(); 

     // render on model sync 
     this.listenTo(this.model, 'sync', this.render); 
    }, 

    render() { 
     … 
    } 
}); 

如果需要的話，Backbone's model.changed DOC參考&下劃線的_.isEmpty's。

哪種方式更清潔？有沒有其他方法可能會錯過？

Answer 1

個人喜好不會覆蓋fetch但不是實現一個包裝的功能，如customFetch

const UserModel = Backbone.Model.extend({ 
// get url for 'me' (ie connected user) 
url() { 
    return app.endpoint + '/users/me/' + app.conToken; 
}, 

isSync() { 
    // an hour ago 
    let hourAgo = Date.now() - 3600000; 

    // data has been fetched less than an hour ago 
    if (this.fetchTime && hourAgo > this.fetchTime) return true; 
    return false; 
}, 

customFetch() { 
    // has not already fetched data or data is older than an hour 
    if (!this.isSync()) { 
     this.fetchTime = Date.now(); 
     this.fetch(); 

     return; 
    } 

    // trigger sync without issuing any http call 
    this.trigger('sync'); 
}, 

… 
}); 

您的資料將在一個循環結束的代碼示例（this.fetch自稱...），所以我的個人偏好是將核心主幹功能包裝在另一個功能中。

我甚至會自行定製我自己定製的Model，這個定製由我使用的所有型號擴展。例如：

const MyModel = Backbone.Model.extend({ 
    isSync() { 
     // an hour ago 
     let hourAgo = Date.now() - 3600000; 

     // data has been fetched less than an hour ago 
     return (this.fetchTime && hourAgo > this.fetchTime); 
    }, 
    customFetch() { 
     this.fetch(); 
    }, 
}); 

然後UserModel會覆蓋customFetch和看起來像這樣：

const UserModel = MyModel.extend({ 
    customFetch() { 
     // has not already fetched data or data is older than an hour 
     if (!this.isSync()) { 
      this.fetchTime = Date.now(); 
      this.fetch(); 
      return; 
     } 

     // trigger sync without issuing any http call 
     this.trigger('sync'); 
    }, 
}); 

可能不是做的最好的方式。對我個人來說，這將是它稍後閱讀和擴展的簡單方法。我想這customFetch將用於某些/所有模型，所以它可以適當修改。