marionette ex

Controller.js

define([
    'jquery',
    'marionette',
    'models/product',
    'models/product_property_value',
    'models/product_property',
    'hbs!template/product_detail/detail',
    'hbs!template/product_detail/edit_string',
    'collections/product_property_values',
    'collections/newsfeed_items',
    'hbs!template/newsfeed/feed'
],
function($, Marionette, ProductModel, ProductPropertyValueModel, ProductPropertyModel, ProductDetailTemplate, StringEditTemplate, ProductPropertyValueCollection, NewsfeedItemCollection, FeedTemplate){
    ProductDetailController = Marionette.Controller.extend({
       
        initialize: function(param){
            this.product_id = param.id;
            this.region = param.region

            this.product = new ProductModel({'id': this.product_id});
            var promise = Q.when(this.product.fetch());

            this.newsfeeditems = new NewsfeedItemCollection({'product': {'id': this.product_id}});
            this.listenTo(this.newsfeeditems, 'change', this.renderFeed);
            this.listenTo(this.newsfeeditems, 'fetch', this.renderFeed);
            this.listenTo(this.newsfeeditems, 'sync', this.renderFeed);
            this.newsfeeditems.setProductId(this.product_id);
            this.newsfeeditems.fetch({reset:true});

            this.listenTo(this.product, 'change', this.render);
            this.listenTo(this.product, 'fetch', this.render);
            this.listenTo(this.product, 'sync', this.render);
        },
        
        show: function (product) {
          var self = this;
          var view = new ProductDetailView({model: product})
          self.region.show(view);
        }
});

    return ProductDetailView;
});

View.js

define([
    'jquery',
    'backbone',
    'models/product',
    'models/product_property_value',
    'models/product_property',
    'hbs!template/product_detail/detail',
    'hbs!template/product_detail/edit_string',
    'collections/product_property_values',
    'collections/newsfeed_items',
    'hbs!template/newsfeed/feed'
],
function($, Backbone, ProductModel, ProductPropertyValueModel, ProductPropertyModel, ProductDetailTemplate, StringEditTemplate, ProductPropertyValueCollection, NewsfeedItemCollection, FeedTemplate){
    ProductDetailView = Backbone.View.extend({
        el: '#product_detail',
        product_id: null,
        events: {
            'click a.show_edit': 'triggerEdit',
            // 'click div.edit_container a.save': 'saveChanges',
            'submit form.edit_property_value': 'saveChanges',
            'click a.cancel_edit': 'cancelEdit'
        },
        initialize: function(param){
            this.product_id = param.id;

            this.product = new ProductModel({'id': this.product_id});
            this.product.fetch();

            this.newsfeeditems = new NewsfeedItemCollection({'product': {'id': this.product_id}});
            this.listenTo(this.newsfeeditems, 'change', this.renderFeed);
            this.listenTo(this.newsfeeditems, 'fetch', this.renderFeed);
            this.listenTo(this.newsfeeditems, 'sync', this.renderFeed);
            this.newsfeeditems.setProductId(this.product_id);
            this.newsfeeditems.fetch({reset:true});

            this.listenTo(this.product, 'change', this.render);
            this.listenTo(this.product, 'fetch', this.render);
            this.listenTo(this.product, 'sync', this.render);
        },

        renderFeed: function(r) {
            context = this.newsfeeditems.toJSON();
            this.$el.find('#product_newsfeed').html(FeedTemplate({items:context}));
        },

        edit_container: null,
        product_property_model: null,
        triggerEdit: function(r) {
            r.preventDefault();
            this.cancelEdit();
            editable_container = $(r.target).parents('.editable').first();
            product_property_value_ids = editable_container.data('property-value-id');

            edit_container = $(editable_container).find('div.edit_container');
            if(edit_container.length === 0) {
                console.log(edit_container);
                editable_container.append('<div class="edit_container"></div>');
                edit_container = $(editable_container).find('div.edit_container');
            }

            this.edit_container = edit_container;

            value_init = [];
            for(var i = 0; i < product_property_value_ids.length; i++) {
                value_init = {'id': product_property_value_ids[i]};
            }

            if(product_property_value_ids.length > 1) {
                throw new Exception('Not supported');
            }

            this.edit_value = new ProductPropertyValueModel({'id': product_property_value_ids[0]});

            this.listenTo(this.edit_value, 'change', this.renderEditField);
            this.listenTo(this.edit_value, 'reset', this.renderEditField);
            this.listenTo(this.edit_value, 'fetch', this.renderEditField);
            this.edit_value.fetch({'reset': true});

            return false;
        },

        cancelEdit: function() {
            this.$el.find('.edit_container').remove();
        },

        renderEditField: function() {
            edit_container.html(StringEditTemplate(this.edit_value.toJSON()));
        },

        saveChanges: function(r) {
            r.preventDefault();
            console.log('save changes');
            ev = this.edit_value;

            _.each($(r.target).serializeArray(), function(value, key, list) {
                ev.set(value, key);
            });
            ev.save();
        },

        render: function(r) {
            context = this.product.toJSON();
            this.$el.html(ProductDetailTemplate(context));

            $(document).foundation();
            return this;
        }
    });

    return ProductDetailView;
});