javascript - 如何在 Marionette.js 中使用 modelEvents

Question

我有 2 个文本字段，其 ID 为源、目的地。如果任何字段值发生变化，相应的模型属性也会发生变化。我使用 Backbone.Model 和 Marionette.CompositeView 中的事件对象来完成此操作。运行良好。

一旦任何模型属性发生变化，相应的函数就会被调用。为此我编写了以下代码。它不起作用，问题是即使一个属性发生变化，两个函数都在评估。

型号代码:

var mapModel = Backbone.Model.extend({
  defaults: {
    startPlace: "",
    endPlace: ""
  }
});

Marionette.CompositeView 代码:

var mapView = Marionette.CompositeView.extend({
  events: {
    "blur #source": "sAttributeSetting",
    "blur #destination": "dAttributeSetting"
  },

  dAttributeSetting: function() {
    this.model.set({"endPlace": document.getElementById(this.ui.destinationPlace).value});
  },

  sAttributeSetting: function() {
    this.model.set({"startPlace": document.getElementById(this.ui.sourcePlace).value});
  },

  modelEvents: {
    "change startPlace": "startMarkerDisplay",
    "change endPlace": "endingMarkerDisplay"
  },

  startMarkerDisplay: function() {
    alert("start");
  },

  endingMarkerDisplay: function() {
    alert("end");
  }
});

html代码:

<input type="text" id="source">
<input type="text" id="destination">

为模型和 View 创建实例

mapModelObj = new mapModel();
var mapViewObj = new mapView({el:$('#mapDiv'), model:mapModelObj});

问题:

1. 最初，如果我在第一个字段(源)中输入任何值，则会出现 2 个警报框(“开始”、“结束”)。

2. 最初，如果您在第二个字段(目的地)中输入任何值，则会出现 4 个警报框(“开始”、“结束”、“开始”、“结束”)

我尝试了很多，但我不明白问题出在哪里

谁能帮帮我。

谢谢

Answer 1

modelEvents 应通过 : 连接。比如说，改变startPlace的事件应该是

'change:startPlace'

如果您使用空格，则会以两个事件结束，而不是一个特定于此属性的事件。

您的代码'change startPlace'代表两个事件，一个是'change'，另一个是'startPlace'。所以你会看到“开始”，“结束”，“开始”，“结束”