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

这应该是最好的方式 - 将一个视图订阅到另一个视图的事件。由于您未提供实例化视图的范围，因此我假设它们都在全局范围内。如果你不明白什么范围意味着请阅读： What is the scope of variables in JavaScript?

因此假设您的第一个视图实例化如下：firstView = new FirstView();。第二个是secondView = new SecondView();。

当firstView中的颜色发生变化时，会触发一个事件：this.trigger( "Color changed", {newColor: "black"} );。请确保在触发此事件之前实例化了两个视图。

现在您需要在firstView：secondView.listenTo( firstView, "Color changed", secondView.handleColorChanged );

的事件上订阅secondView

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

这不是解决任务的唯一方法。但这是将视图彼此分开的方法。没有人知道另一个视图在大型应用程序中最需要的东西，简化调试过程等等。

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

1 个答案: