如何从其他视图访问变量？

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 );

这不是解决任务的唯一方法。 但这是将视图彼此分离的方法。 没有人知道另一种观点，这是大型应用程序中最需要的，它使调试过程变得容易等。