js backbone 一个表单组件，在不一样地方同时使用并同步数据

我今年主要作活动，会遇到不少预定报名的功能，一个页面，两个报名表单（内嵌在页面的表单和弹窗表单），其实两表单内容功能都是同样的，只是布局会有些不一样，可是由于咱们如今的项目并无加入什么状态管理的模块，因此只能手动实现同步数据的功能。以前再遇到这种需求的时候由于时间问题，就写了两个表单组件分别管理本身的数据，可是这种解决方案真的是费力不讨好，稍微有些改动就要两个表单组件同时改，因此我就想了些优化方案：

补充：我主要主要是写在pc端同步表单的，若是在移动端的话，若是两表单内容一致，可直接使用一个表单组件，在弹窗时，让该表单组件固定定位，并使嵌入表单那一块元素固定高度就能够了

一.目标：

　　一个表单组件，在同一页面中可在不一样地方同时使用，并实现数据同步功能

二.解决方案：（前提：已写好表单组件，实例化该表单组件即表单对象）

　　1.表单组件可直接做为内嵌表单，而后吧表单对象传给弹窗组件，在弹窗组件内渲染出来。

　　　　结果：虽然功能实现了，但问题是页面中仅能同时渲染一个表单组件。不能同时显示，弃

　　2.再实例化一个表单组件的对象，传递给弹窗组件，在弹窗组件中渲染，并维护这个新表单对象的数据。

　　　　结果：2.1虽然功能实现了，但数据不能同步。由于实际上是两个对象，因此对应的数据确定是相互独立的，因此必须手动同步数据

　　　　　　　2.2手动同步数据其实只须要在打开和关闭弹窗时，判断两表单对象中的数据是否一只，而后对应更新表单对象数据并从新渲染便可

　　　　　　　2.3在弹窗表单中，常须要报名成功后关闭弹窗，由于在报名成功后须要修改整个页面中部分组件的状态，因此能够直接在修改状态时，关闭弹窗

三.总结：

　　哈哈哈，使用解决方案二，最终试验成功。仍是redux,vuex这些状态管理机制好用啊，直接就同步了，咱们这个backbone项目基本上只是用了view层，后续在活动不忙的时候我试试看可否把其他的集成进来，就不用这么绕了。

四.关键代码：

import Form from './form'; // 表单组件

import FormDialog from './formDialog1'; // 弹窗组件

 

this.form = new Form({

　　cityCode,

　　signUpStatus,

　　id,

　　updateSignUpStatus: this._updateSignUpStatus // 报名成功后会修改页面状态

});

this.form1 = new Form({ // 嵌入页面的表单组件

　　cityCode,

　　signUpStatus,

　　id,

　　toggleShowSignSucess: this._toggleShowSignSucess, 

});

this.formDialog = new FormDialog({ 

　　form: this.form1, // 将表单组件对象放入弹窗组件中

　　syncFormData: this._syncFormData // 用户关闭弹窗时同步嵌入表单组件数据

});

// 修改页面报名状态

updateSignUpStatus(signUpStatus) {

　　Object.assign(this.options, { signUpStatus });

　　if (signUpStatus) {

　　　　// 隐藏表单弹窗

　　　　if (this.formDialog.options.show) this.formDialog.toggleShow();

　　　　// 更新两表单改变状态

　　　　this.form.update({ signUpStatus });

　　　　this.form1.update({ signUpStatus });

　　}

}

// 同步表单数据

syncFormData(show) {

　　if (!show) { // 打开弹窗,同步弹窗表单数据

　　　　if (JSON.stringify(this.form.options) !== JSON.stringify(this.form1.options)) {

　　　　　　this.form1.update(this.form.options);

　　　　}

　　} else { // 关闭弹窗，同步嵌入表单数据

　　　　if (JSON.stringify(this.form.options) !== JSON.stringify(this.form1.options)) {

　　　　　　this.form.update(this.form1.options);

　　　　}

　　}

}

// 渲染方法

render() {

　　this.$el.find('.form-contianer').html(this.form.render()); //嵌入表单组件放入页面

　　this.$el.find('.formDialog-container').html(this.formDialog.render());//弹窗表单组件放入页面

}