Backbone embedded collection event











up vote
0
down vote

favorite












I've created a model (see Delegation) made of basic attributes (name, activity) and one collection (members).



See jsfiddle



The fetch method update the model and trigger a sync event on it - but I would like to be notified when the embedded collection is synced (ie in a real case to render a view when the inner collection is synced).



I tried this



this.listenTo(this.get('members'),'sync',function(){...}


but the corresponding event never fires.



What is the proper way to have it triggered?










share|improve this question


























    up vote
    0
    down vote

    favorite












    I've created a model (see Delegation) made of basic attributes (name, activity) and one collection (members).



    See jsfiddle



    The fetch method update the model and trigger a sync event on it - but I would like to be notified when the embedded collection is synced (ie in a real case to render a view when the inner collection is synced).



    I tried this



    this.listenTo(this.get('members'),'sync',function(){...}


    but the corresponding event never fires.



    What is the proper way to have it triggered?










    share|improve this question
























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      I've created a model (see Delegation) made of basic attributes (name, activity) and one collection (members).



      See jsfiddle



      The fetch method update the model and trigger a sync event on it - but I would like to be notified when the embedded collection is synced (ie in a real case to render a view when the inner collection is synced).



      I tried this



      this.listenTo(this.get('members'),'sync',function(){...}


      but the corresponding event never fires.



      What is the proper way to have it triggered?










      share|improve this question













      I've created a model (see Delegation) made of basic attributes (name, activity) and one collection (members).



      See jsfiddle



      The fetch method update the model and trigger a sync event on it - but I would like to be notified when the embedded collection is synced (ie in a real case to render a view when the inner collection is synced).



      I tried this



      this.listenTo(this.get('members'),'sync',function(){...}


      but the corresponding event never fires.



      What is the proper way to have it triggered?







      javascript backbone.js






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 18 at 20:01









      Christian

      14318




      14318
























          2 Answers
          2






          active

          oldest

          votes

















          up vote
          0
          down vote














          When you execute the fetch function of Backbone, it returns a
          PROMISE, you can use the function then to launch a function at the
          moment the fetch is finished, you can also use the catch for when
          it fails.




          For example:



          this.model = new Backbone.Model()
          this.model.url ="example"
          this.model.fetch().then((data) => {
          console.log("succes: " + data); // Finished the fetch successfully
          }).catch((data) =>{
          console.log("error: " + data); // The fetch ended in error
          })


          For your code:



          You can use it in this part Backbone.Model.prototype.fetch or if your fetch function returns a Promise, use it when calling the fetch of the model.






          share|improve this answer








          New contributor




          javimovi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.


















          • Hello javimovi, Thank you for taking time to reply to my question. However, I'm not sure I understand your answer and how could the promise be used to trigger the event? Could you give me a full code example or modify the jsfiddle?
            – Christian
            Nov 19 at 23:44




















          up vote
          0
          down vote













          I don't see any code that fetches the collection, hence sync is not triggered on the collection.
          You should do delegation1.get('members').fetch(). For this to work, the collection should have it's own URL as well.






          share|improve this answer





















          • Hello TJ, Thank you, if I understand well, calling fetch on the model containing the collection isn't enough to fetch properly the collection itself? I've just one URL returning both the collection content and the additional parameters (as in the fiddle) var jsonData = { name: "delegation_2", activity: "design", members: [ {firstname: "John", lastname: "DOE"}, {firstname: "Jean", lastname: "Dupont"} ] }; Should I deal with this in the parse method or there is a better technic?
            – Christian
            Nov 21 at 5:45










          • " calling fetch on the model containing the collection isn't enough to fetch properly the collection itself" - yes, because backbone doesn't support nested structures out of the box. If your application needs such capabilities a lot, maybe look into backbone plugins such as backbonerelational.org. If you only want minimal capabilities, you can override the fetch/save/destroy or sync (for all of them) and parse to add your custom collection handling - something like save(){ //your code here; Backbone.model.prototype.save.call(this, arguments);}
            – T J
            Nov 21 at 12:32












          • Or just keep it simple and deal with model only: inside model's parse make a collection and add as a model attribute, then override the models toJSON() method, call toJSON() on the collection, add it to the rest of model attributes and return the combined data structure. In this case your backend for the model should be able to handle model+collection data...
            – T J
            Nov 21 at 12:38










          • Thank you for the directions, I'll give a try to the second solution. Backbonerelational is over-weighted regarding my needs.
            – Christian
            Nov 21 at 16:24











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














           

          draft saved


          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53364902%2fbackbone-embedded-collection-event%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          2 Answers
          2






          active

          oldest

          votes








          2 Answers
          2






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes








          up vote
          0
          down vote














          When you execute the fetch function of Backbone, it returns a
          PROMISE, you can use the function then to launch a function at the
          moment the fetch is finished, you can also use the catch for when
          it fails.




          For example:



          this.model = new Backbone.Model()
          this.model.url ="example"
          this.model.fetch().then((data) => {
          console.log("succes: " + data); // Finished the fetch successfully
          }).catch((data) =>{
          console.log("error: " + data); // The fetch ended in error
          })


          For your code:



          You can use it in this part Backbone.Model.prototype.fetch or if your fetch function returns a Promise, use it when calling the fetch of the model.






          share|improve this answer








          New contributor




          javimovi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.


















          • Hello javimovi, Thank you for taking time to reply to my question. However, I'm not sure I understand your answer and how could the promise be used to trigger the event? Could you give me a full code example or modify the jsfiddle?
            – Christian
            Nov 19 at 23:44

















          up vote
          0
          down vote














          When you execute the fetch function of Backbone, it returns a
          PROMISE, you can use the function then to launch a function at the
          moment the fetch is finished, you can also use the catch for when
          it fails.




          For example:



          this.model = new Backbone.Model()
          this.model.url ="example"
          this.model.fetch().then((data) => {
          console.log("succes: " + data); // Finished the fetch successfully
          }).catch((data) =>{
          console.log("error: " + data); // The fetch ended in error
          })


          For your code:



          You can use it in this part Backbone.Model.prototype.fetch or if your fetch function returns a Promise, use it when calling the fetch of the model.






          share|improve this answer








          New contributor




          javimovi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.


















          • Hello javimovi, Thank you for taking time to reply to my question. However, I'm not sure I understand your answer and how could the promise be used to trigger the event? Could you give me a full code example or modify the jsfiddle?
            – Christian
            Nov 19 at 23:44















          up vote
          0
          down vote










          up vote
          0
          down vote










          When you execute the fetch function of Backbone, it returns a
          PROMISE, you can use the function then to launch a function at the
          moment the fetch is finished, you can also use the catch for when
          it fails.




          For example:



          this.model = new Backbone.Model()
          this.model.url ="example"
          this.model.fetch().then((data) => {
          console.log("succes: " + data); // Finished the fetch successfully
          }).catch((data) =>{
          console.log("error: " + data); // The fetch ended in error
          })


          For your code:



          You can use it in this part Backbone.Model.prototype.fetch or if your fetch function returns a Promise, use it when calling the fetch of the model.






          share|improve this answer








          New contributor




          javimovi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.










          When you execute the fetch function of Backbone, it returns a
          PROMISE, you can use the function then to launch a function at the
          moment the fetch is finished, you can also use the catch for when
          it fails.




          For example:



          this.model = new Backbone.Model()
          this.model.url ="example"
          this.model.fetch().then((data) => {
          console.log("succes: " + data); // Finished the fetch successfully
          }).catch((data) =>{
          console.log("error: " + data); // The fetch ended in error
          })


          For your code:



          You can use it in this part Backbone.Model.prototype.fetch or if your fetch function returns a Promise, use it when calling the fetch of the model.







          share|improve this answer








          New contributor




          javimovi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.









          share|improve this answer



          share|improve this answer






          New contributor




          javimovi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.









          answered Nov 19 at 13:56









          javimovi

          976




          976




          New contributor




          javimovi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.





          New contributor





          javimovi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.






          javimovi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
          Check out our Code of Conduct.












          • Hello javimovi, Thank you for taking time to reply to my question. However, I'm not sure I understand your answer and how could the promise be used to trigger the event? Could you give me a full code example or modify the jsfiddle?
            – Christian
            Nov 19 at 23:44




















          • Hello javimovi, Thank you for taking time to reply to my question. However, I'm not sure I understand your answer and how could the promise be used to trigger the event? Could you give me a full code example or modify the jsfiddle?
            – Christian
            Nov 19 at 23:44


















          Hello javimovi, Thank you for taking time to reply to my question. However, I'm not sure I understand your answer and how could the promise be used to trigger the event? Could you give me a full code example or modify the jsfiddle?
          – Christian
          Nov 19 at 23:44






          Hello javimovi, Thank you for taking time to reply to my question. However, I'm not sure I understand your answer and how could the promise be used to trigger the event? Could you give me a full code example or modify the jsfiddle?
          – Christian
          Nov 19 at 23:44














          up vote
          0
          down vote













          I don't see any code that fetches the collection, hence sync is not triggered on the collection.
          You should do delegation1.get('members').fetch(). For this to work, the collection should have it's own URL as well.






          share|improve this answer





















          • Hello TJ, Thank you, if I understand well, calling fetch on the model containing the collection isn't enough to fetch properly the collection itself? I've just one URL returning both the collection content and the additional parameters (as in the fiddle) var jsonData = { name: "delegation_2", activity: "design", members: [ {firstname: "John", lastname: "DOE"}, {firstname: "Jean", lastname: "Dupont"} ] }; Should I deal with this in the parse method or there is a better technic?
            – Christian
            Nov 21 at 5:45










          • " calling fetch on the model containing the collection isn't enough to fetch properly the collection itself" - yes, because backbone doesn't support nested structures out of the box. If your application needs such capabilities a lot, maybe look into backbone plugins such as backbonerelational.org. If you only want minimal capabilities, you can override the fetch/save/destroy or sync (for all of them) and parse to add your custom collection handling - something like save(){ //your code here; Backbone.model.prototype.save.call(this, arguments);}
            – T J
            Nov 21 at 12:32












          • Or just keep it simple and deal with model only: inside model's parse make a collection and add as a model attribute, then override the models toJSON() method, call toJSON() on the collection, add it to the rest of model attributes and return the combined data structure. In this case your backend for the model should be able to handle model+collection data...
            – T J
            Nov 21 at 12:38










          • Thank you for the directions, I'll give a try to the second solution. Backbonerelational is over-weighted regarding my needs.
            – Christian
            Nov 21 at 16:24















          up vote
          0
          down vote













          I don't see any code that fetches the collection, hence sync is not triggered on the collection.
          You should do delegation1.get('members').fetch(). For this to work, the collection should have it's own URL as well.






          share|improve this answer





















          • Hello TJ, Thank you, if I understand well, calling fetch on the model containing the collection isn't enough to fetch properly the collection itself? I've just one URL returning both the collection content and the additional parameters (as in the fiddle) var jsonData = { name: "delegation_2", activity: "design", members: [ {firstname: "John", lastname: "DOE"}, {firstname: "Jean", lastname: "Dupont"} ] }; Should I deal with this in the parse method or there is a better technic?
            – Christian
            Nov 21 at 5:45










          • " calling fetch on the model containing the collection isn't enough to fetch properly the collection itself" - yes, because backbone doesn't support nested structures out of the box. If your application needs such capabilities a lot, maybe look into backbone plugins such as backbonerelational.org. If you only want minimal capabilities, you can override the fetch/save/destroy or sync (for all of them) and parse to add your custom collection handling - something like save(){ //your code here; Backbone.model.prototype.save.call(this, arguments);}
            – T J
            Nov 21 at 12:32












          • Or just keep it simple and deal with model only: inside model's parse make a collection and add as a model attribute, then override the models toJSON() method, call toJSON() on the collection, add it to the rest of model attributes and return the combined data structure. In this case your backend for the model should be able to handle model+collection data...
            – T J
            Nov 21 at 12:38










          • Thank you for the directions, I'll give a try to the second solution. Backbonerelational is over-weighted regarding my needs.
            – Christian
            Nov 21 at 16:24













          up vote
          0
          down vote










          up vote
          0
          down vote









          I don't see any code that fetches the collection, hence sync is not triggered on the collection.
          You should do delegation1.get('members').fetch(). For this to work, the collection should have it's own URL as well.






          share|improve this answer












          I don't see any code that fetches the collection, hence sync is not triggered on the collection.
          You should do delegation1.get('members').fetch(). For this to work, the collection should have it's own URL as well.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 20 at 10:33









          T J

          32.3k955108




          32.3k955108












          • Hello TJ, Thank you, if I understand well, calling fetch on the model containing the collection isn't enough to fetch properly the collection itself? I've just one URL returning both the collection content and the additional parameters (as in the fiddle) var jsonData = { name: "delegation_2", activity: "design", members: [ {firstname: "John", lastname: "DOE"}, {firstname: "Jean", lastname: "Dupont"} ] }; Should I deal with this in the parse method or there is a better technic?
            – Christian
            Nov 21 at 5:45










          • " calling fetch on the model containing the collection isn't enough to fetch properly the collection itself" - yes, because backbone doesn't support nested structures out of the box. If your application needs such capabilities a lot, maybe look into backbone plugins such as backbonerelational.org. If you only want minimal capabilities, you can override the fetch/save/destroy or sync (for all of them) and parse to add your custom collection handling - something like save(){ //your code here; Backbone.model.prototype.save.call(this, arguments);}
            – T J
            Nov 21 at 12:32












          • Or just keep it simple and deal with model only: inside model's parse make a collection and add as a model attribute, then override the models toJSON() method, call toJSON() on the collection, add it to the rest of model attributes and return the combined data structure. In this case your backend for the model should be able to handle model+collection data...
            – T J
            Nov 21 at 12:38










          • Thank you for the directions, I'll give a try to the second solution. Backbonerelational is over-weighted regarding my needs.
            – Christian
            Nov 21 at 16:24


















          • Hello TJ, Thank you, if I understand well, calling fetch on the model containing the collection isn't enough to fetch properly the collection itself? I've just one URL returning both the collection content and the additional parameters (as in the fiddle) var jsonData = { name: "delegation_2", activity: "design", members: [ {firstname: "John", lastname: "DOE"}, {firstname: "Jean", lastname: "Dupont"} ] }; Should I deal with this in the parse method or there is a better technic?
            – Christian
            Nov 21 at 5:45










          • " calling fetch on the model containing the collection isn't enough to fetch properly the collection itself" - yes, because backbone doesn't support nested structures out of the box. If your application needs such capabilities a lot, maybe look into backbone plugins such as backbonerelational.org. If you only want minimal capabilities, you can override the fetch/save/destroy or sync (for all of them) and parse to add your custom collection handling - something like save(){ //your code here; Backbone.model.prototype.save.call(this, arguments);}
            – T J
            Nov 21 at 12:32












          • Or just keep it simple and deal with model only: inside model's parse make a collection and add as a model attribute, then override the models toJSON() method, call toJSON() on the collection, add it to the rest of model attributes and return the combined data structure. In this case your backend for the model should be able to handle model+collection data...
            – T J
            Nov 21 at 12:38










          • Thank you for the directions, I'll give a try to the second solution. Backbonerelational is over-weighted regarding my needs.
            – Christian
            Nov 21 at 16:24
















          Hello TJ, Thank you, if I understand well, calling fetch on the model containing the collection isn't enough to fetch properly the collection itself? I've just one URL returning both the collection content and the additional parameters (as in the fiddle) var jsonData = { name: "delegation_2", activity: "design", members: [ {firstname: "John", lastname: "DOE"}, {firstname: "Jean", lastname: "Dupont"} ] }; Should I deal with this in the parse method or there is a better technic?
          – Christian
          Nov 21 at 5:45




          Hello TJ, Thank you, if I understand well, calling fetch on the model containing the collection isn't enough to fetch properly the collection itself? I've just one URL returning both the collection content and the additional parameters (as in the fiddle) var jsonData = { name: "delegation_2", activity: "design", members: [ {firstname: "John", lastname: "DOE"}, {firstname: "Jean", lastname: "Dupont"} ] }; Should I deal with this in the parse method or there is a better technic?
          – Christian
          Nov 21 at 5:45












          " calling fetch on the model containing the collection isn't enough to fetch properly the collection itself" - yes, because backbone doesn't support nested structures out of the box. If your application needs such capabilities a lot, maybe look into backbone plugins such as backbonerelational.org. If you only want minimal capabilities, you can override the fetch/save/destroy or sync (for all of them) and parse to add your custom collection handling - something like save(){ //your code here; Backbone.model.prototype.save.call(this, arguments);}
          – T J
          Nov 21 at 12:32






          " calling fetch on the model containing the collection isn't enough to fetch properly the collection itself" - yes, because backbone doesn't support nested structures out of the box. If your application needs such capabilities a lot, maybe look into backbone plugins such as backbonerelational.org. If you only want minimal capabilities, you can override the fetch/save/destroy or sync (for all of them) and parse to add your custom collection handling - something like save(){ //your code here; Backbone.model.prototype.save.call(this, arguments);}
          – T J
          Nov 21 at 12:32














          Or just keep it simple and deal with model only: inside model's parse make a collection and add as a model attribute, then override the models toJSON() method, call toJSON() on the collection, add it to the rest of model attributes and return the combined data structure. In this case your backend for the model should be able to handle model+collection data...
          – T J
          Nov 21 at 12:38




          Or just keep it simple and deal with model only: inside model's parse make a collection and add as a model attribute, then override the models toJSON() method, call toJSON() on the collection, add it to the rest of model attributes and return the combined data structure. In this case your backend for the model should be able to handle model+collection data...
          – T J
          Nov 21 at 12:38












          Thank you for the directions, I'll give a try to the second solution. Backbonerelational is over-weighted regarding my needs.
          – Christian
          Nov 21 at 16:24




          Thank you for the directions, I'll give a try to the second solution. Backbonerelational is over-weighted regarding my needs.
          – Christian
          Nov 21 at 16:24


















           

          draft saved


          draft discarded



















































           


          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53364902%2fbackbone-embedded-collection-event%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Costa Masnaga

          Fotorealismo

          Sidney Franklin