如何從其他視圖訪問變量？

Question

如何從其他視圖訪問變量？

我想在另一個視圖中訪問selectedColor ：

    'onClickColor': function(e) {

        var view = this,
            selectedColor = $(e.currentTarget).data('color'), //$(this).data('color');
            style = $('<style>.highlight { color: ' + selectedColor +'; margin-left: 4px;}</style>');

        $('.initial').css('color', selectedColor);
        $('.highlight').css('color', selectedColor);
        $('html > head').append(style);
        //view.canvasColorPick(e);
    },

然后在另一個視圖中，我想在表單提交時使用ajax傳遞變量selectedColor。

     'formCollect' : function (e) { 

        var view = this;
        var fname = $('#your_name').val();
        var email = $('#email').val();
        var state = $('#state').val();
        var color = selectedColor;
        var url = 'services/users/add?name='+fname+'&email='+email+'&state='+state+'&color='+color+'';
        $.get(url);
    },

Answer 1

這應該是最好的方法–將一個視圖訂閱到另一個視圖的事件。 由於您未提供范圍，因此您實例化了視圖，因此我認為它們都在全局范圍內。 如果您不了解范圍的含義，請閱讀以下內容： JavaScript中變量的范圍是什么？

因此，假設您的第一個視圖是這樣實例化的： firstView = new FirstView(); 。 第二個是secondView = new SecondView(); 。

當firstView中的顏色發生更改時，將觸發一個事件： this.trigger( "Color changed", {newColor: "black"} ); 。 請確保在觸發此事件之前實例化兩個視圖。

現在，您需要在firstView事件上訂閱secondView： secondView.listenTo( firstView, "Color changed", secondView.handleColorChanged );

這里的handleColorChanged是事件處理程序，它將獲取事件參數作為參數。

現在Alltogeather：

var FirstView = Backbone.view.extend({
  /** your casual code here */
  'onClickColor': function(e) {
     /** your code here */
     this.trigger( "Color changed", { newColor: "black" });
  }
});

var SecondView = Backbone.view.extend({
  /** your casual code here */
  'handleColorChanged': function( eventData ) {
     console.log( eventData );
  }
});

var firstView = new FirstView(),
    secnodView = new SecondView();
secondView.listenTo( firstView, "Color changed", secondView.handleColorChanged );

這不是解決任務的唯一方法。 但這是將視圖彼此分離的方法。 沒有人知道另一種觀點，這是大型應用程序中最需要的，它使調試過程變得容易等。