如何在沒有DOM事件的情況下從視圖獲取信息到Backbone.js中的模型

Question

我是Backbone.js的新手，在為模型視圖關系確定正確的體系結構時遇到了麻煩。

我有一個視圖，其中包含一個輸入框和一個模型，該模型應采用該輸入框的內容並將其發送到服務器。

我的問題是，我並不總是有一個謹慎的DOM事件，該事件會觸發視圖更新模型數據的請求，例如input.change 。 有時代碼本身需要詢問模型將更新發送到服務器。

到目前為止，我已經想到了針對此問題的三種解決方案，但是我不確定它們是否有用：

• 在輸入元素的keypress事件上更新模型

• 用模型初始化視圖后，讓視圖更新/向模型添加一個名為“ get_input_value() ”的函數，該函數返回輸入框的值

• 每當應用程序需要請求模型更新服務器時，首先在視圖中調用一個函數，該函數會將用戶在模型的視圖中鍵入的所有信息更新為模型。

請記住，這是一個簡化的示例。 該視圖還包含子視圖，所有子視圖都包含用戶可以操縱的許多元素，需要使用所有這些信息來更新模型，以便可以更新服務器。

任何幫助和意見表示贊賞！ 非常感謝！

編輯:::

基於machineghost的響應，我現在看到我沒有正確闡明此問題：

有一個DOM事件，但問題在於它不一定源自使用模型的視圖內部。 它可能源自路由器或其他視圖，並由全局事件處理程序觸發。 此外，沒有1：1的視圖模型關系。 多個以不同方式表示模型的視圖使用該模型。 因此，在這種情況下，似乎更新服務器的命令不應通過View，而應通過模型本身。 在這種情況下，模型必須能夠說“將我的意見與我同步！”。

但是我不知道如何在不違反規則的情況下做到這一點，從而在架構方面造成其他問題。

Answer 1

好的，這是一個主觀的問題，所以請原諒我這好像是在噴出我的兩分錢。 在我什至沒有回答你的問題之前，我不得不承認我對你有點懷疑：

不一定總是有謹慎的DOM事件

因為用戶可以執行的幾乎所有操作都會觸發您可以觀看的事件。 例如，如果您要等到用戶更改文本輸入，就可以進行change ，但是（如您所述）還可以進行各種key*事件，此外還可以進行blur （通常用於此類操作）。 在3（+）之間，您應該始終能夠適當響應用戶的操作。 只有（如果說）您必須每3秒保存一次文本輸入的內容，它才真正獨立於DOM事件。

因此，在不知道您的詳細信息的情況下，我僅需指出那里有些腥味。 但是無論如何，關於您的實際問題，以下是我對您的想法的看法：

在輸入元素的按鍵事件上更新模型

當然可以，但是只要確保使用視圖進行實際的事件處理/模型設置即可； 在模型中掛接onKeyPress處理程序將是一個壞主意

總的來說，這種方法看起來很標准，並且符合骨干范式。

使用模型初始化視圖后，讓視圖更新/向模型添加一個名為“ get_input_value（）”的函數，該函數返回輸入框的值

我不太了解這如何解決您的問題，而且似乎將關注點放在了錯誤的位置：模型應該（理想情況下）與DOM無關。

每當應用程序需要請求模型更新服務器時，首先在視圖中調用一個函數，該函數會將用戶在模型的視圖中鍵入的所有信息更新為模型。

是每5分鍾進行一次保存嗎？ 如果不是，則可能是響應用戶的操作而發生的，您應該使用事件處理程序進行響應。

但是，如果確實需要使同步獨立於用戶操作，則建議使用自定義事件來管理事務。 換句話說，在模型的sync方法中放置類似this.trigger('preSync') 。 然后，使用該模型的每個視圖都可以綁定某種updateMyModelValue方法，即。 this.model.on('preSync', this.updateMyModelValue, this); 。

這樣，您的模型代碼根本就不會直接與DOM交互。 相反，它只是擔心應該擔心的東西（數據），而視圖在需要從DOM更新數據時會注意。

希望能有所幫助。

* 編輯（響應您對問題的編輯） *

在這種情況下，模型必須能夠說“將我的意見與我同步！”。

模型說的一般Backbone方式...好吧，幾乎所有觀點都來自事件。

（從技術上講，您可以在模型本身中維護模型視圖的列表，然后遍歷該列表以告知視圖執行操作。Backbone甚至沒有經過優化，可以執行此操作。但是，從可維護性的角度來看，對我來說似乎是一種可怕的方法。）

我的“預同步”事件示例（如上）演示了如何使用此技術。 如果不清楚，請回擊。

同樣，如果您遇到以下問題：

1. 查看A捕獲事件
2. 視圖B需要對此事件做出響應

您基本上有兩個選擇：

1）您可以將兩個視圖緊密結合。 假設有一個表視圖創建了行視圖，但是需要響應這些行中發生的事件。 創建表時，可以將表本身作為選項傳遞給該行（ new Row({table:this}) ），然后當這些行需要告訴其表“發生了事件”時，他們可以執行this.options.table.informThatAnEventHappened() 。 如果兩個視圖本質上是相關的，例如表及其行，則這是一種很好的方法。 如果沒有，更好的方法是：

2）您可以使用事件在視圖之間進行通信。 假設您在頁面頂部有一個標題div，每當“標題”文本輸入發生更改時，都需要對其進行更新...但是該文本輸入在頁面的下方，與概念上的關系不大頁面標題（除了設置頁面標題）。 這兩個元素（及其視圖）之間的共同點是數據，即標題本身的文本。

現在，假設titleDivView和titleSettingInputView都共享一個pageTitle模型。 當titleSettingInputView調用this.model.set('titleText', 'newTitle') ，titleDivView可以偵聽this.model.on('change:titleText', ...) ，並適當地重新呈現自身以作為響應。 這樣，兩個完全未連接的，解耦的視圖可以彼此交互，而無需創建相互關聯的代碼的復雜網絡。

當然，如果沒有一個很方便的綁定到“ change:title ”事件，則可以像上面我描述的自定義“ presync”事件一樣，隨時創建自己的事件。