0

ID を持つ 2 つのテキストフィールドがありsource,destinationます。フィールド値が変更されると、対応するモデル属性が変更されます。を使用してこれを行いBackbone.Model and events object in Marionette.CompositeViewました。それはうまくいっています。

いずれかのモデルの属性変更に対応する関数が呼び出されます。このために、次のコードを書きました。両方の関数が評価している1つの属性の変更でさえ、問題は機能していません。

モデルコード:

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">

モデルとビューの両方のインスタンスを作成する

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

問題:

  1. 最初に最初のフィールド（ソース）に値を入力すると、2つのアラートボックス（「開始」、「終了」）が表示されます。

  2. 最初に2番目のフィールド（宛先）に任意の値を入力すると、4つのアラートボックス（「開始」、「終了」、「開始」、「終了」）が表示されます

いろいろ試しましたが、どこで問題が発生しているのかわかりませんでした

誰でも私を助けることができますか？

ありがとう

4

2 に答える 2

0

あなたのソリューションに対する私の観察は次のとおりです（ただし、下部に2番目のソリューションを提案します）：

  • エンティティ イベントのバインディングにはコロン構文があります。これは構成のハッシュである必要があり{ "event:name": "eventHandler" }ます。複数のハンドラーは、スペースで区切ることができます。文字列ハンドラ名の代わりに関数を指定できます。

  • elバックボーン ビューのプロパティを活用できます。を使用する代わりに、 を使用document.getElementById(this.ui.sourcePlace)できますthis.$('#source')。この最新の検索は、eldom 全体を検索するのではなく、コンテキスト内でのみ検索します。このようにして、評価ははるかに高速になります...そのように、次の式を使用する必要があります。this.$('.destination').val()

あなたの問題について私のjsfiddleをチェックしてください：http://jsfiddle.net/orbanbotond/VEcK6/

コードは次のとおりです。

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

var mapView = Marionette.CompositeView.extend({
  events: {
    "blur .source": "sAttributeSetting",
    "blur .destination": "dAttributeSetting"
  },
  dAttributeSetting: function(){
    console.log('end blured');
    console.log('input value:' + this.$('.destination').val());
    this.model.set({
      "endPlace": this.$('.destination').val()
    });
    console.log('endplace set to: ' + this.model.get('endPlace'));
  },
  sAttributeSetting: function() {
    console.log('start blured');
    console.log('input value:' + this.$('.source').val());
    this.model.set({
      "startPlace": this.$('.source').val()
    });
    console.log('startPlace set to: ' + this.model.get('startPlace'));
  },
  modelEvents: {
    "change:startPlace": "startMarkerDisplay",
    "change:endPlace": "endingMarkerDisplay"
  },
  startMarkerDisplay: function () {
    alert("start");
  },
  endingMarkerDisplay: function () {
    alert("end");
  }
});

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

私の提案した2番目の解決策：

あなたがしていることすべてを行うstickitライブラリを使用してください。dom セレクターと監視対象のモデル属性の間のマッピングを定義するだけで済みます。

ここにjsfiddleがあります：http://jsfiddle.net/orbanbotond/fm64P/

コードは次のとおりです。

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

var mapView = Marionette.CompositeView.extend({
  template: "#mapDiv",
  events: {
    "blur .source": "sAttributeSetting",
    "blur .destination": "dAttributeSetting"
  },
  bindings: {
    '.source': {
      observe: 'startPlace'
    },
    '.destination': {
      observe: 'endPlace'
    }
  },
  onRender: function() {
    this.stickit();
    console.debug("Sticked to it already");
  },
});

$(document).ready(function(){
  var mapModelObj = new mapModel();
  var mapViewObj = new mapView({
    el: $('#mapDiv'),
    model: mapModelObj
  });
  mapViewObj.render();
    mapModelObj.bind('change:startPlace', function(obj){alert("New value: " + obj.get('startPlace'));});
    mapModelObj.bind('change:endPlace', function(){alert("New value: " + obj.get('endPlace'));});
});

すべてのコード サンプルで、このテンプレートを使用しました (ID セレクターの代わりにクラス セレクターを使用しました)。

<div id="mapDiv">
    <input type="text" class="source">
    <input type="text" class="destination">
</div>
于 2013-11-09T17:29:09.197 に答える