Skip to content

Update mode example #9

Closed
Closed
@aposidelov

Description

@aposidelov

Here is an example how to implement autoform with update mode & upload field. Critical place is that autoform should be wrapped in {{#if Template.subscriptionsReady }} which makes sure that template level subscription is ready. Without it the picture preview won't be shown. Also to make upper {{#if}} to be worked the template level subscription should be used (this.subscribe instead of Meteor.subscribe)

EditProductForm.js

Template.EditProductForm.onCreated(function() {    
    var self = this;        
    self.autorun(function() {   
        var id = FlowRouter.getParam('id');            
        self.subscribe('products.one', id);        
    });
});

Template.EditProductForm.helpers({
    getProduct() {
        var id = FlowRouter.getParam('id');
        var product = ProductsCollection.findOne(id);        
        return product;
    }
});

EditProductForm.html

<template name="EditProductForm">
    <div class="container">
        <div class="row">       
            {{#if Template.subscriptionsReady }}    
                {{#autoForm type="update" doc=getProduct collection=ProductsCollection  id="EditProductForm"}}
                    {{> afQuickField name='title'}}
                    {{> afQuickField name='desc'}}
                    {{> afQuickField name='priceAmount'}}
                    {{> afQuickField name='tags'}}
                    {{> afQuickField name='picture'}}     
                    <button type="submit" class="btn btn-primary btn-update">Update</button>
                    <button type="submit" class="btn btn-primary btn-delete">Delete</button>
                {{/autoForm}}
            {{/if}}
        </div>
    </div>
</template>

and server-side code

Meteor.publish('products.one', function(id) {       
    var product = ProductsCollection.find({_id: id});   
    var pictureId = product.fetch()[0].picture; 
    return [product, Images.find({_id: pictureId}).cursor]; 
});

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions