灰烬js：deleteRecord TypeError：未定义不是函数

Question

Here is the problem, I have feed definition which has sections with many to many relation ship. That mean, 1 feed definition can have multiple section and 1 section can have multiple feed definition.

When I display fee, I have to display the list of sections with whom it is associated. Please check sections in the model.

If some one wants to delete that association, I have a separate model called section feed which is a separate table. So, on delete action, I fetch the section feed entry and try to delete but I am getting below error.

Please let me know what I am doing wrong.

Error place

this.store.find("sectionfeed", {
                       sectionDefintionID : section.id
                       feedDefinitionID : feed.id
                       }).then(function (sectionfeed) {
                          sectionfeed.deleteRecord(); //is not working. Here I get the error
                          sectionfeed.save();
                       });

I am able to fetch the section feed but on section.deleteRecord I get the error. Please see below the complete information.

Setup

 DEBUG: -------------------------------
ember.js:14463 DEBUG: Ember      : 1.7.0
ember.js:14463 DEBUG: Ember Data : 1.0.0-beta.9
ember.js:14463 DEBUG: Handlebars : 1.3.0
ember.js:14463 DEBUG: jQuery     : 2.1.1
ember.js:14463 DEBUG: -------------------------------

template

<div class="row">
    <div class="col-sm-12">
        {{go-back}}
    </div>
</div>
<br>
<div class="row">
    <div class="col-sm-12">
        <div class="pull-left lead"> {{displayTitle}} </div>
        {{link-to 'Edit' 'feeddefinition.edit' this class="edit-button btn btn-primary btn-sm"}}
    </div>
</div>
<br>
<div class="row">
    <div class="col-sm-12">
        <table class="table table-hover">
            <tr>
                <td><strong> Id </strong></td>
                <td> {{id}} </td>
            </tr>
            <tr>
                <td><strong> Title </strong></td>
                <td> {{displayTitle}} </td>
            </tr>
            <tr>
                <td><strong> Url </strong></td>
                <td><a {{bind-attr href=url}} target="_blank"> {{url}} </a></td>
            </tr>
            <tr>
                <td><strong> Link </strong></td>
                <td><a {{bind-attr href=link}} target="_blank"> {{link}} </a></td>
            </tr>
            <tr>
                <td><strong> Disabled </strong></td>
                <td> {{disabled}} </td>
            </tr>
            <tr>
                <td><strong> Created </strong></td>
                <td>{{createdAt}}</td>
            </tr>
            <tr>
                <td><strong> Last Modified </strong></td>
                <td> {{modifiedAt}} </td>
            </tr>
            <tr>
            <div class="col-sm-12">
                <table class="table table-bordered table-hover channels">
                    <thead>
                    <th> Name</th>
                    <th> Created</th>
                    <th> Modified</th>
                    <th> Updated</th>
                    <th> Liverpooled</th>
                    </thead>
                    <tbody>
                    {{#each section in model.sections}}
                        <tr>
                            <td> {{#link-to 'section' section}}{{section.name}}{{/link-to}} </td>
                            <td> {{fromNow section.createdAt}} </td>
                            <td> {{fromNow section.modifiedAt}} </td>
                            <td> {{fromNow section.updatedAt}} </td>
                            <td> {{fromNow section.liverpooledAt}} </td>
                            <td>
                                <button class="btn btn-primary btn-sm" {{action 'remove' model section}}>Remove</button>
                            </td>
                        </tr>
                    {{ else }}
                        <tr>
                            <td colspan="5">
                        No Section found.
                            </td>
                        </tr>
                    {{/each}}
                    </tbody>
                </table>
            </div>
            </tr>
        </table>
    </div>
</div>

Model of feed definition which contains sections

/*global Ember*/
Backoffice.Feeddefinition = DS.Model.extend({
    createdAt: DS.attr('date'),
    modifiedAt: DS.attr('date'),
    url: DS.attr('string'),
    type: DS.attr('string'),
    link: DS.attr('string'),
    title: DS.attr('string'),
    disabled: DS.attr('boolean'),
    automaticallyAdded: DS.attr('boolean'),
    userAdded: DS.attr('boolean'),
    sections: DS.hasMany('sections', {async: true}),
    displayTitle: function () {
        return this.get('title') === '' ? 'No Title' : this.get('title');
    }.property('title')
});

// probably should be mixed-in...
Backoffice.Feeddefinition.reopen({
    attributes: function () {
        var model = this;
        return Ember.keys(this.get('data')).map(function (key) {
            return Em.Object.create({ model: model, key: key, valueBinding: 'model.' + key });
        });
    }.property()
});

Model of section feed - which is many to many relation between feed and section

/ global Ember /

Backoffice.Sectionfeed = DS.Model.extend({
    sectionDefinitionID: DS.attr('string'),
    feedDefinitionID: DS.attr('string')
});

Router of feed

Backoffice.FeeddefinitionRoute = Ember.Route.extend({
    model: function (params) {
        return this.get('store').find('feeddefinition', params.feeddefinition_id);
    },
    actions: {
            remove: function (feed, section) {
                var model = this.model;
                this.store.find("sectionfeed", {
                       sectionDefintionID : section.id
                       feedDefinitionID : feed.id
                       }).then(function (sectionfeed) {
                          sectionfeed.deleteRecord(); //is not working. Here I get the error
                          sectionfeed.save();
                       });
            }
    }
});

Error

ember.js:14463 TypeError: undefined is not a function
    at http://localhost:9000/scripts/combined-scripts.js:1492:33
    at tryCatch (http://localhost:9000/bower_components/ember/ember.js:45818:16)
    at invokeCallback (http://localhost:9000/bower_components/ember/ember.js:45830:17)
    at publish (http://localhost:9000/bower_components/ember/ember.js:45801:11)
    at http://localhost:9000/bower_components/ember/ember.js:29069:9
    at DeferredActionQueues.invoke (http://localhost:9000/bower_components/ember/ember.js:634:18)
    at Object.DeferredActionQueues.flush (http://localhost:9000/bower_components/ember/ember.js:684:15)
    at Object.Backburner.end (http://localhost:9000/bower_components/ember/ember.js:147:27)
    at Object.Backburner.run (http://localhost:9000/bower_components/ember/ember.js:202:20)
    at apply (http://localhost:9000/bower_components/ember/ember.js:18382:27)
ember.js:3722 Uncaught Error: Assertion Failed: TypeError: undefined is not a function

REST API is written in java. Below is the endpoint

  @RequestMapping(value = "/sectionfeeds", method = {RequestMethod.DELETE})
    public void remove(@RequestBody String body) throws Exception {
        JsonNode jsonNode = objectMapper.readTree(body);
        SectionFeed sectionFeed = objectMapper.reader(SectionFeed.class).readValue(jsonNode.get("sectionfeed"));
        sectionFeedManager.remove(sectionFeed.getSectionDefinitionID(), sectionFeed.getFeedDefinitionID());
    }

Finder method

  @RequestMapping(value = "/sectionfeeds", method = {RequestMethod.GET})
public @ResponseBody
Map<String, Object> get(@RequestParam(value = "sectionDefinitionID", required = true) String sectionDefinitionId,
                @RequestParam(value = "feedDefinitionID", required = true) String feedDefinitionId) throws Exception {
    System.out.println(sectionDefinitionId);
    System.out.println(feedDefinitionId);
    SectionFeed sectionFeed = sectionFeedManager.find(UUID.fromString(sectionDefinitionId),
                            UUID.fromString(feedDefinitionId));
    return createReturnMap("sectionfeed",sectionFeed, null);
}

From the comment below, I made changes

actions: {
        remove: function (feed, section) {
            var model = this.model;
            var sectionfeed = this.store.find("sectionfeed", {
                   sectionDefinitionID:section.id,
                   feedDefinitionID : feed.id
                   });
            var sfeed = sectionfeed.get("sectionfeed");
            sfeed.deleteRecord();
            sfeed.save();
        }
}

After that I get "Uncaught TypeError: Cannot read property 'deleteRecord' of undefined".

Answer 1

I think it might be because your query to the store is returning an array. as per the docs

If you provide a plain object as the second argument to find, Ember Data will make a GET request with the object serialized as query params. This method returns DS.PromiseArray in the same way as find with no second argument.

For example, we could search for all person models who have the name of Peter:

var peters = this.store.find('person', { name: "Peter" }); // => GET to /persons?name='Peter

If you check if it is returning an array, and not an object, and then call the deleteRecord() on the first object in that array