3 Replies Latest reply on May 9, 2016 10:25 PM by John 'JB' Brock-Oracle

    Programmatically add new elements to a Film Strip ojFilmStrip

    3211865

      I basically copied the code in Film Strip - Master-Detail

      this is a Master - Detail strip, what I want is to add a button and add new elements to the strip, so, I changed the array to a observableArray:

       

      self.chemicals = ko.observableArray([

        { name: 'Hydrogen' },

        { name: 'Helium' },

        { name: 'Lithium' },

      ...

       

      and added a new button:

       

      self.buttonClick = function(data, event){

         newChemical = { name: "alanium" + (new Date()).getTime() };

         self.chemicals.push(newChemical)

       

         return true;

      }

       

      but the UI doesnt show the new elements, I tried a solution proposed in: Film strip is not working in Promise API calls:

       

      self.buttonClick = function(data, event){

         newChemical = { name: "alanium" + (new Date()).getTime() };

         self.chemicals.push(newChemical)

         self.chemicals.valueHasMutated();

         return true;

      }

       

      but it didn't work, I also tried something like this:

       

      self.buttonClick = function(data, event){

         newChemical = { name: "alanium" + (new Date()).getTime() };

         self.chemicals.push(newChemical)

         self.chemicals.valueHasMutated();

       

        $("#masterFilmStrip").ojFilmStrip( "refresh" );

        $("#detailFilmStrip").ojFilmStrip( "refresh" );

         return true;

      }

       

      and that seems to refresh the masterFilmStrip but the detailFilmStrip disappears and the component doesn't work very well after that. I see errors in the console like:

      ojfilmstrip.js:939 Uncaught Error: JET FilmStrip: Value of 'currentItem' option not found: 12

       

      How can I add new elements to my film strip by clicking a button?

        • 1. Re: Programmatically add new elements to a Film Strip ojFilmStrip
          John 'JB' Brock-Oracle

          Hello,

           

          The first issue that is causing the problem with the new value not being added to the array is that you need to call the refresh method on the DOM element bound to the ojFilmStrip component after you do the push.

          If you are pushing multiple components to the array, I recommend using the mapping utils and calling the valueHasMutated method that you linked to so that you don't get an event fired every time the push is performed.

           

          self.buttonClick = function(data, event){
            newChemical = { name: "alanium" + (new Date()).getTime() };
            self.chemicals.push(newChemical);
            $('#filmstrip').ojFilmStrip("refresh");
          
            return true;
          }
          

           

          The refresh must happen on the DOM element that the ojComponent data-bind is taking place on.

           

          While this will get the new element added to the array and it will refresh the filmstrip, there is still some strange layout issues going on as soon as you cross over to a second page of data. I'm asking one of the engineers about that issue and hope to have an answer for you shortly.

          • 2. Re: Re: Programmatically add new elements to a Film Strip ojFilmStrip
            3211865

            Hello John

             

            we used the refresh as you suggested in the DOM element bound to the ojFilmStripm and we could see the new items in the strip no, but we were still getting an error when trying to navigate the new elements:

            ojfilmstrip.js:939 Uncaught Error: JET FilmStrip: Value of 'currentItem' option not found: 12

             

            we solved the issue like this:

             

            self.buttonClick = function(data, event){
                newChemical = [{ name: "alanium" + (new Date()).getTime() }];
            
                ko.utils.arrayPushAll(self.chemicals, newChemical);
                self.chemicals.valueHasMutated();
                var len = self.chemicals().length;
            
                $("#masterFilmStrip").ojFilmStrip( "refresh" );
                $("#detailFilmStrip").ojFilmStrip( "refresh" );
            
                var paginig = $("#detailFilmStrip").ojFilmStrip( "getPagingModel" );
                var paginigMaster = $("#masterFilmStrip").ojFilmStrip( "getPagingModel" );
                paginig.setTotalSize( len );
                paginigMaster.setTotalSize(len);
                self.currDetailPage(len - 1 );
            
                var expectedPage =  Math.floor(  self.currDetailPage() / paginigMaster.getPageSize()  )
            
                if ( expectedPage != paginigMaster.getPage() ) {
                    paginigMaster.setPage(expectedPage)
                }     
            
                return true;
            }
            

             

            it seams that the array changes, but the film strip fails to notice the size of the array has changed, so we updated the paging model by hand.

            it seems to be working fine now.

            • 3. Re: Re: Programmatically add new elements to a Film Strip ojFilmStrip
              John 'JB' Brock-Oracle

              Yes, I'm told this is definitely a bug.  The workaround that I was given is to destroy and recreate the ojFilmStrip component, which does appear to work, but your approach may be more precise.

               

                              self.buttonClick = function (data, event) {
                                  var newChemical = {name: "alanium" + (new Date()).getTime()};
                                  self.chemicals.push(newChemical);
                                  $('#filmStrip').ojFilmStrip("destroy");
                                  $('#filmStrip').ojFilmStrip({'arrowPlacement': self.currentNavArrowPlacement(), 'arrowVisibility': self.currentNavArrowVisibility()});
                                  return true;
                              };