Передача данных с одного вида базовой линии на другой

Question

Допустим, у меня есть следующий вид на базовой линии, который загружает две ссылки, одну с текстом-якорем «test1», а другой с текстом-якорем «test2».

Я связываю событие щелчка, и я получаю HTML-ссылку, которая была нажата, и сохраните ее внутри переменной clickedHtml.

Теперь этот вид загружается маршрутизатором базовой линии.

Когда пользователь нажимает на одну из двух ссылок (test1 или test2), маршрутизатор будет загружать другое представление под названием «main».

Теперь, как передать переменную «clickedHtml» в это представление?

Должен ли я использовать LocalStorage?

Должен ли я объявить его глобально, как window.clickedHtml?

Есть ли лучший способ?

Ty!

// file: views/test.js 
      define([ 
       'jquery', 
       'underscore', 
       'backbone' 
      ], function($, _, Backbone) { 

       var Test = Backbone.View.extend({ 

        el : '.test', 

        initialize : function() { 

         var that = this; 

         that.$el.html('<a href="#/main">test1</a><br /><a href="#/main">test2</a>'); 


        }, 

        events : { 

         'click .test a' : 'click' 

        }, 

        click : function (e) { 

         var clickedHtml = $(e.target).html(); 

        } 

       return Test; 

      }); 

Вот мой маршрутизатор:

// file: router.js 

    define([ 
     'jquery', 
     'underscore', 
     'backbone', 
     'views/test', 
     'views/main' 
    ], function ($, _, Backbone, Test, Main) { 

     var Router = Backbone.Router.extend({ 

      routes: { 
       '' : 'home', 
       'test' : 'test' 
      } 
     }); 

     var initialize = function() { 

      var router = new Router(); 

      router.on('route:home', function() { 

       var main = new Main(); 

      }); 

      router.on('route:test', function() { 

       var test = new Test(); 
      }); 

      Backbone.history.start(); 
     } 

     return { 

      initialize : initialize 
     } 
    }); 

Answer 1

Основном вы должны использовать Backbone.Event: (Или это эквиваленты в марионеток)

//Declaration 
var notificationService = {}; 
_.extend(notificationService, Backbone.Events); 

//Used by listener 
notificationService.on("alert", function(o) { 
    alert(o); 
}); 

//Used by publisher 
notificationService.trigger("alert", {foo:"bar"}); 

Реальный вопрос в том, как это получить передается от одного вида в другой?

Как я понимаю, у вас есть 2 варианта:

1. Bubble notificationService от одного вида к другому при инициализации
2. Оберните notificationService с моделью requirejs, которая возвращает его (создает «почти глобальный» notificationService, который может быть передан requirejs).

Хотя мне немного не нравятся одиночные игры, этот случай a singleton notificationService объект, который может легко впрыснуть requirejs в каждую модель, пригодится.

EDIT:

Другой вариант, быстрый и грязный один, просто использовать JQuery, чтобы вызвать событие на DOM (в частности, элемент тела) и слушать тела в другой точки зрения

ПРИМЕЧАНИЕ:

обратите внимание, что когда-то вид прослушивания закрыт, он должен удалить реши f от прослушивания событий (unbind/off), поэтому у вас не будет утечки памяти

Answer 2

Вы могли бы, возможно, сохранить его как свойство в представлении:

click : function (e) { 
    this.clickedHtml = $(e.target).html(); 
} 

Если ваш маршрутизатор доступа обе точки зрения, он может просто передать имущество firstView.clickedHtml функции в secondView (или инициализатору)

Answer 3

В th В то же время я бы создал объект хранения temp в вашем глобальном пространстве имен и использовал его для передачи данных между вашими представлениями, немного «взломанными», но лучше, чем использование локального хранилища, или напрямую с окном, по крайней мере с временный объект в вашем собственном глобальном пространстве имен известен как цель использования объектов.

Мне кажется, что использовать http://backbonejs.org/#Events для аналогичной цели передачи данных между двумя представлениями, хотя это зависит от того, как вы структурируете свои страницы, если у вас есть два представления на странице, представляющие элемент «control» или «component» «этот подход работает очень хорошо.

Если вы разместите ссылку на свой сайт или что-то, я могу взглянуть и дать вам дополнительную помощь.

Russ

Answer 4

Магистральные мероприятия - это путь сюда. При захвате события с точки зрения, я бы пузырек его с помощью:

click : function (e) { 
    var clickedHtml = $(e.target).html(); 
    Backbone.Events.trigger("eventname",clickedHtml); 
} 

Затем, вы должны быть в состоянии захватить это в маршрутизаторе функции Initialise, используя:

Backbone.Events.on("eventname", responseFunction); // listen out for this event 

А потом в маршрутизаторе объявляют отдельную функцию:

responseFunction : function(clickedHtml) 
    { 
     //Do whatever you want here 
    } 

Я пишу это из памяти, так что, надеюсь, это имеет смысл. Я также не тестировал ловить событие, подобное этому маршрутизатору, но он должен работать.

HTH.

Answer 5

Архитектурно говоря, ваша цель должна заключаться в том, чтобы сохранить код общего назначения & многоразового использования.

Одна из основных вещей, которые вы не хотите делать в подобной ситуации, - это передать прямые ссылки от одного объекта к другому - если вы в конечном итоге измените настройку одного из объектов или вам нужно пройти данные от другого объекта также могут быть очень беспорядочными.

Один шаблон дизайна, который широко используется в ситуациях, подобных этому, является посредником. Также известный как «pub/sub», вы можете иметь централизованный автономный объект, который опосредует информацию между объектами. Некоторые объекты будут публиковать информацию, а другие объекты могут подписаться на них. Медиатор действует как посредник, так что объектам никогда не приходится общаться напрямую друг с другом. Это делает гораздо более универсальное, многоразовое и поддерживаемое решение.

Больше информации здесь:

http://addyosmani.com/largescalejavascript/#mediatorpattern,

Javascript Patterns

На Магистральной стороне вещей ... Если вы использовали марионетка, вы можете встретить бесплатный мини-библиотеки (также реализованный Дериком Бейли) под названием wreqr. Вы можете использовать это, чтобы создать простой медиатор с низкими накладными расходами в ваших базовых приложениях.

https://github.com/marionettejs/backbone.wreqr

Это в основном позволяет использовать событие магистральной стиля через объекты. Пример ниже:

Во-первых, вам нужно создать глобально доступный объект-посредник, или добавить его в ваше приложение или использовать пространство имен require.js:

var mediator = new Wreqr.EventAggregator(); 

внутри Вид # 1

events : { 
    'click .test a' : 'click' 
}, 

click : function (e) { 
    var clickedHtml = $(e.target).html(); 

    // trigger an 'element:click' event, which can be listened to from other 
    // places in your application. pass var clickedHtml with the event 
    // (passed to the arguments in your eventhandler function). 
    mediator.trigger('element:click', clickedHtml); 
} 

Внутри View # 2

initialize: function(){ 
    //... 
    this.listenTo(mediator, 'element:click', this.myEventHandler, this); 
} 

myEventHandler: function(elem){ 
    // elem = clickedHtml, passed through the event aggregator 
    // do something with elem... 
}