8

我正在使用 require js 和 Backbone 开发一个适用于 android 的应用程序。我必须通过 touchend 事件将集合中的模型传递给路由器。我该怎么做？

define(["jquery", "underscore","backbone","handlebars", "views/CinemaView", "models/CineDati",  "text!templates/listacinema.html"],

function($,_,Backbone,Handlebars,CinemaView, CineDati, template){   
  var ListaCinemaView = Backbone.View.extend({
    template: Handlebars.compile(template),
    events: {
        "touchend" : "Details"
    },  
    initialize : function (){
        var self = this;
        $.ajax({
            url: 'http://www.cineworld.com/api/quickbook/cinemas',
            type: 'GET',
            data: {key: 'BwKR7b2D'},
            dataType: 'jsonp', // Setting this data type will add the callback parameter for you
            success: function (response, status) {
                // Check for errors from the server
                if (response.errors) {
                    $.each(response.errors, function() {
                        alert('An error occurred. Please Try Again');
                    });
                } else {

                    $.each(response.cinemas, function() {
                        var cinema = new CineDati();
                        cinema.set({ id : this.id, name : this.name , cinema_url : this.cinema_url, address: this.address, postcode : this.postcode , telephone : this.telephone });
                        self.model.add([cinema]);

                    });
                    self.render();
                }}
        });


    },

    events : {
        "#touchend" : Dettagli
    },      

    render : function(){
        $(this.el).empty();

        $(this.el).html(template).append(
            _.each(this.model.models, function (cinema) {
              $("#lista").append(new CinemaView({
                          model: cinema
               }).render().el); }, this));

          return this;
    },

     Dettagli : function(){ 

        Backbone.history.navigate( this.model , {trigger: "true"});
    }


    });
    return ListaCinemaView;

});
4

2 回答 2

7

您需要覆盖 Backbone 的导航功能，如下所示：

var Router = Backbone.Router.extend({
    routeParams: {},
    routes: {
        "home": "onHomeRoute"
    },
    /*
     *Override navigate function
     *@param {String} route The route hash
     *@param {PlainObject} options The Options for navigate functions.
     *              You can send a extra property "params" to pass your parameter as following:
     *              {
     *               params: 'data'
     *              }
     **/
    navigate: function(route, options) {
        var routeOption = {
                trigger: true
            },
            params = (options && options.params) ? options.params : null;
        $.extend(routeOption, options);
        delete routeOption.params;

        //set the params for the route
        this.param(route, params);
        Backbone.Router.prototype.navigate(route, routeOption);
    },

    /*
     *Get or set parameters for a route fragment
     *@param {String} fragment Exact route hash. for example:
     *                   If you have route for 'profile/:id', then to get set param
     *                   you need to send the fragment 'profile/1' or 'profile/2'
     *@param {Any Type} params The parameter you to set for the route
     *@return param value for that parameter.
     **/
    param: function(fragment, params) {
        var matchedRoute;
        _.any(Backbone.history.handlers, function(handler) {
            if (handler.route.test(fragment)) {
                matchedRoute = handler.route;
            }
        });
        if (params !== undefined) {
            this.routeParams[fragment] = params;
        }

        return this.routeParams[fragment];
    },

    /*
     * Called when hash changes to home route
     **/
    onHomeRoute: function() {
        console.log("param =", this.param("home"));
    }

})

在这里，我编写了一个自定义函数“param”，用于获取/设置要发送的参数。

现在要发送一个自定义参数，您可以像下面这样发送它：

var router = new Router();
Backbone.history.start({});
router.navigate("home", {
    params: 'Your data'
});

要在回调函数内的 get data 中检索数据，您可以编写如下代码：

this.param("home"); //this will return the parameter you set while calling navigate function or else will return null

于 2014-12-01T14:24:33.070 回答
6

Router.navigate()不传递任何数据。它设置 url 片段并采用几个选项。请参阅此处的文档：http: //backbonejs.org/#Router-navigate

我的建议：

  • 用于Router.navigate()更改 URL。
  • 使用Backbone.Events聚合器触发（或发布）您的事件和数据。

假设您有一个电影列表，并且您有一个查看按钮。视图按钮发布它想要显示的模型并更改 URL 片段。

var vent = _.extend( {}, Backbone.Events ); // Create your app specific event aggregator

var ListaCinemaView = Backbone.View.extend({

    ...

    Dettagli : function(){
        vent.trigger('movie:show:request', this.model);

        Backbone.history.navigate( this.model.get('id') );
    }
}

在您的应用程序的其他地方添加一个处理程序movie:view:request。

vent.on('movie:show:request', showMovieDetails);

var showMovieDetails = function(model) { ... }

最后，查看MarrionetteJS。它使用发布/订阅模式来处理应用程序各部分之间的通信。这是一个非常好的框架，因为您基本上可以选择加入您想要使用的部分。它有很好的文档记录和支持。此外，它的创建者Derick Bailey在 Stackoverflow 上非常活跃，因此您可以快速获得帮助。

于 2013-08-25T14:46:47.137 回答