Backbonejs查看自我模板replaceWith和事件 [英] Backbonejs View Self Template replaceWith and Events

问题描述

我在我的第一个应用程序使用的工作bbjs，经过10教程和无尽的来源我想拿出我的code设计。

I'm working on my first app using bbjs, after 10 tutorials and endless sources I am trying to come up with my code design.

我问什么是视图和模板的最佳实践。另外还有一个问题的事件我与挣​​扎。
据我了解，视图是要负责一个元素及其内容（和其它子视图）。
对于code到可管理的，可测试的，等元素/模板是要传递给在创建视图。
在我的应用程序恕我直言，认为应持有的模板，因为可见的元素有很多个国家，并为每个国家不同的模板。
当状态的改变，我想最好创建一个新的观点，但是，它是可能的，以自己与新元素更新？

I ask what is the best practice with views and templates. Also there is an events problem I am struggling with. As I understand, the view is to be responsible for one element and its contents (and other sub-views). For the code to be manageable, testable, etc.. the element/template is to be passed to the view on creation. In my app Imho the view should hold the templates, because the visible element has many "states" and a different template for each state. When the state changes, I guess its best to create a new view, but, is it possible for the view to update itself with new element?

App.Box = Backbone.Model.extend({
    defaults: function() {
        return {
            media: "http://placehold.it/200x100",
            text: "empty...",
            type: "type1"
        };
    }
});


App.BoxView = Backbone.View.extend({
    template: {},
    templates: {
            "type1": template('appboxtype1'),
            "type2": template('appboxtype2')
    },
    events: {
      'click .button': 'delete'
    },
    initialize: function(options) {
        this.listenTo(this.model, 'change', this.render);
        this.listenTo(this.model, 'destroy', this.remove);

        this.render();
    },

    render: function() {
        this.template = this.templates[ this.model.get("type") ];

        // first method
        this.$el.replaceWith(  $($.parseHTML(this.template(this)))  );
        this.$el.attr("id", this.model.cid);

        // second method
        var $t_el = this.$el;
        this.setElement( $($.parseHTML(this.template(this))) );
        this.$el.attr("id", this.model.cid);
        $t_el.replaceWith(  this.$el  );
        this.delegateEvents();

        //$('#'+this.model.cid).replaceWith(  $(g.test.trim()) );


        //! on the second render the events are no longer bind, deligateEvents doesn't help


        return this;
    },

    // get values
    text: function() { return this.model.get('text');  },
    media: function() { return this.model.get('media');  },
    delete: function() {
        this.model.destroy();
    }
});

感谢名单！ ：）

Thanx! :)

推荐答案

我想出了这个解决方案： http://jsfiddle.net/Antonimo/vrQzF/4/

I came up with this solution: http://jsfiddle.net/Antonimo/vrQzF/4/

如果任何人有一个更好的主意它总是欢迎！

if anyone has a better idea its always welcome!

基本上，鉴于：

        var t_$el = this.$el;
        this.$el = $($.parseHTML(this.template(this)));
        this.$el.attr("id", this.cid);
        if (t_$el.parent().length !== 0) { // if in dom
            this.undelegateEvents();
            t_$el.each(function(index, el){ // clean up
                if( index !== 0 ){ $(el).remove(); }
            });
            t_$el.first().replaceWith(this.$el);
            this.delegateEvents();
        }

这篇关于Backbonejs查看自我模板replaceWith和事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！