jQuery：如何更改点击事件的数据绑定？答案

【问题标题】：jQuery: How to change data-bind on click event?jQuery：如何更改点击事件的数据绑定？
【发布时间】：2015-08-25 17:12:14
【问题描述】：

我有一个包含多个字段的表单。下面是例子：

<input id="txtContactFirstName" name="txtContactFirstName" maxlength="20" class="k-textbox standardInput" required="required" data-bind="value: appointmentDetails.ContactFirstName" />
<input id="txtContactPhone" name="txtContactPhone"  data-role="maskedtextbox" data-mask="(999)-000-0000" class="k-textbox phoneInput" required="required" data-bind="value: appointmentDetails.ContactPhone" />

我在表单上也有一个复选框。

<label id="lblPatientDetailsSameAsPatient"><input id="patientDetailsSameAsPatientCheckBox" type="checkbox" data-bind="checked: intakeSettings.sameAsPatient" name ="PatientDetailsSameAsPatientCheckBox" />Same as Patient</label>

当我单击复选框时，我希望 data-bind 值更改为其他值。所以基本上我会从 patientDetails.FirstName 中提取 txtContactFirstName 的数据，并从 patient.Details.FirstName 中提取 txtContactPhone 的数据？如何在点击时实现这一点并将数据绑定值分配给 txtContactFirstName 和 txtContactPhone ？

$("#patientDetailsSameAsPatientCheckBox").click(function (e) {
        if (e.target) {

           ?? Logic goes here which will assign data-bind values to txtContactFirstName  and txtContactPhone ?

        }
    });

【问题讨论】：

标签： javascript jquery html kendo-ui

【解决方案1】：

您可以使用 jQuery 方法 data 访问 HTML 元素的数据属性并设置值。另外，我认为您不需要那里的 if (e.target) { 逻辑。

$("#patientDetailsSameAsPatientCheckBox").click(function (e) {

        $("#txtContactFirstName").data("bind",patientDetails.FirstName);
        $("#txtContactPhone").data("bind",patientDetails.Phone);

});

这是与data 方法有关的文档：http://api.jquery.com/data/

【讨论】：

这当然假设 patientDetails 是您在设置数据属性的地方可以访问的有效对象。如果没有代码中的上下文很难知道，但它似乎是医疗数据，所以不公开分享是可以理解的。
我可以访问该对象以进行测试。但是文本框不会用新值刷新。我错过了什么吗？

【解决方案2】：

我会通过将更改事件处理程序添加到您的表单绑定到的可观察对象上来做到这一点。如果更改的字段是intakeSettings.sameAsPatient，则设置txtContactFirstName 和txtContactPhone 绑定到的observable 的属性。

// What your form is bound to
var viewModel = new kendo.observable({
  patient: {
    FirstName: 'Ted',
    Phone: '123-456-7890'
  },
  appointmentDetails: {
    ContactFirstName: '',
    ContactPhone: ''
  },
  intakeSettings: {
    sameAsPatient: false
  }
});

viewModel.bind('change', function(e) {
  // e.field is the property that changed, e.sender is the observable
  if(e.field === 'intakeSettings.sameAsPatient') {
    if(e.sender.get(e.field) === true) {
      e.sender.set('appointmentDetails.ContactFirstName', e.sender.patient.FirstName);
      e.sender.set('appointmentDetails.ContactPhone', e.sender.patient.Phone);
    }
    else {
      e.sender.set('appointmentDetails.ContactFirstName', '');
      e.sender.set('appointmentDetails.ContactPhone', '');
    }
  }
});

这样你就可以保持与 javascript 之外的表单的紧密耦合。

【讨论】：

【解决方案3】：

使用checkbox 的change 事件，如下所示。这假设您将在 data-bind 属性中具有实际值。您可以通过使用that.checked ? $(this).data('bind') : '' 而不是$(this).data('bind') 来优化代码以在未选中复选框时删除值。：

$(function() {
    $('#patientDetailsSameAsPatientCheckBox').on('change', function() {
        var that = this;
        $(':text').val(function() {
            return that.checked ? $(this).data('bind') : '';
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="txtContactFirstName" name="txtContactFirstName" maxlength="20" class="k-textbox standardInput" required="required" data-bind="John" />
<input id="txtContactPhone" name="txtContactPhone"  data-role="maskedtextbox" data-mask="(999)-000-0000" class="k-textbox phoneInput" required="required" data-bind="555-1212" />

<label id="lblPatientDetailsSameAsPatient"><input id="patientDetailsSameAsPatientCheckBox" type="checkbox" data-bind="checked: intakeSettings.sameAsPatient" name ="PatientDetailsSameAsPatientCheckBox" />Same as Patient</label>

【讨论】：