javascript - 如何在没有DOM事件的情况下从 View 获取信息到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甚至没有经过优化，可以让您做到这一点。但是，从可维护性的角度来看，对我来说似乎是一种可怕的方法。）

我的“预同步”事件示例（如上）演示了如何使用此技术。如果不清楚，请回击。

同样，如果您遇到以下问题：


查看A捕获事件
视图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”事件一样，随时创建自己的事件。