Issue with Deps.Dependancy and Meteor.update

help
1

Im using .Deps to track whether a template is in edit mode of view mode. I’ve got it working fine, apart from when I’ve saved the changes. It goes back to view mode fine, but then won’t let me switch back to edit. It seems that when the doc gets updated, it kills the dependancy. Each _exstandBlock is called in another template via a standard helper and #each

Any ideas?

Issue in the console:

Exception in template helper: TypeError: Cannot read property 'depend' of undefined

Here’s my code for reference:

Template._techpitchBlock.created = function() {
    this.data.isEditing = false;
    this.data.isEditingDep = new Deps.Dependency();
};

Template._techpitchBlock.helpers({
    'editing' : function() {
        this.isEditingDep.depend();
        return this.isEditing;
    },
});

Template._techpitchBlock.events({

    //e = event
    //t = template

    'click .edit-techpitch': function(e, t) {
        t.data.isEditing = true;
        t.data.isEditingDep.changed();
    },

    'click .cancel-changes': function(e, t) {
        t.data.isEditing = false;
        t.data.isEditingDep.changed();
    },

    'click .save-changes': function(e, t) {
        var techpitchId = this._id;
        console.log(this);
        var techpitch = {
            name: t.find('[name=name]').value,
            pitcher: t.find('[name=pitcher]').value,
            description: t.find('[name=description]').value,
        };
        t.data.isEditing = false;
        t.data.isEditingDep.changed();
        Meteor.call('editTechpitch', techpitchId, techpitch);
    },
});
1 Like
2

I think there are a number of things to be addressed.

this.data.isEditing etc: this.data with reference to the data context of the template is read only: http://docs.meteor.com/#/full/template_data. These variables should be declared directly on this:

Template._techpitchBlock.created = function() {
    this.isEditing = false;
    this.isEditingDep = new Deps.Dependency();
};

(and subsequently through the rest of the code).

In order for the template helpers to access the template variables, they need to reference Template.instance() rather than this, so:

Template._techpitchBlock.helpers({
    'editing' : function() {
        var self = Template.instance();
        self.isEditingDep.depend();
        return self.isEditing;
    },
});

Also, Deps has been replaced by Tracker. However, it would be better to replace the dependency code with reactive vars, because it simplifies the structure:

Template._techpitchBlock.onCreated(function() {
    this.isEditing = new ReactiveVar(false);
});

Template._techpitchBlock.helpers({
    'editing' : function() {
        return Template.instance().isEditing.get();
    },
});

And similarly for your events:

Template._techpitchBlock.events({
    'click .edit-techpitch': function(e, t) {
        t.isEditing.set(true);
    },

    'click .cancel-changes': function(e, t) {
        t.isEditing.set(false);
    },

    'click .save-changes': function(e, t) {
        var techpitchId = this._id;
        console.log(this);
        var techpitch = {
            name: t.find('[name=name]').value,
            pitcher: t.find('[name=pitcher]').value,
            description: t.find('[name=description]').value,
        };
        t.isEditing.set(false);
        Meteor.call('editTechpitch', techpitchId, techpitch);
    },
});
2 Likes
3

Thanks so much, this was really helpful. I must have found some outdated information on deps. The Reactive Var package looks very useful too.