N
N
Nikita Kit2018-04-05 15:41:18
JavaScript
Nikita Kit, 2018-04-05 15:41:18

How to return data to its original state?

Help, please, to understand.
I have an instance that accepts page content and spreads data across components when the user scrolls to the section where the content should be.
The request to the content depends on which slide the user started scrolling from. (Ie - a slider opens with 5 slides, if the user scrolls from the 1st slide - one json is requested, if from the 2nd - another, etc.).
In the data instance, when it is initialized, a js module is requested, in which all the initial data states are located. If the user scrolls back to the slider, then I need to clear the content to its original state, but here's the problem - the module with the initial state object mutates into the last loaded content out of some kind of fright, absolutely not giving a damn about the fact that I use Object.assign to avoid this problem.

if vContentEl
      currentRoute = vContentEl.getAttribute("data-page")
      # тут я из модуля начальной структуры контента создаю новый объект !!НОВЫЙ!! 
      # и отдаю его на съедение rootContent.$data - всё проходит правильно, но proxy начинает обсервиться
      console.log(require './content/proxy') #уже мутировал и обсервится
      contentProxy = Object.assign(require "./content/proxy")
      rootContent = new Vue
        el: "#vcontent"
        data: ->
          return contentProxy
        components:
          vcontent: require("./content/content.vue")
          lightbased: require("./content/components/lightbased.vue")
          blogbar: require("./content/components/blogbar.vue")
          team: require("./content/components/team.vue")
          partners: require("./content/components/partners.vue")
          features: require("./content/components/features.vue")
          condits: require("./content/components/condits.vue")

      getPageData = ->
        that = this
        switch currentRoute
          when "about"
            axios.get('/jsondata/about/data.json')
              .then (resp) ->
                Object.assign rootContent.$data.data, resp.data.data
              .catch (err) ->
                console.log err
          when "skyfall"
            axios.get('/jsondata/skyfall/data.json')
              .then (resp) ->
                Object.assign rootContent.$data.data, resp.data.data
              .catch (err) ->
                console.log err
          else
            return
      isInited = false
      window.addEventListener 'scroll', (e) ->
        if window.pageYOffset >= 200 && isInited == false
          console.log('set data')
          getPageData()
          isInited = true
          return
        if window.pageYOffset < 200 && isInited == true
          Object.assign rootContent.$data, require("./content/proxy").data
          isInited = false

UPD: Guys, if anyone is interested, I just solved the problem:
at the 3rd hour of frantic attempts to bring Vue to life, I just took and turned the ./content/proxy module into a function that returned data to me with an initial state
vContentEl = document.querySelector "#vcontent"
    if vContentEl
      proxy = require("./content/proxy")
      rootContent = new Vue
        el: "#vcontent"
        data: proxy()
        components:
          vcontent: require("./content/content.vue")
          lightbased: require("./content/components/lightbased.vue")
          blogbar: require("./content/components/blogbar.vue")
          team: require("./content/components/team.vue")
          partners: require("./content/components/partners.vue")
          features: require("./content/components/features.vue")
          condits: require("./content/components/condits.vue")

      getPageData = (currentRoute)->
        
        console.log currentRoute
        switch currentRoute
          when "about"
            axios.get('/jsondata/about/data.json')
              .then (resp) ->
                Object.assign rootContent.$data.data, resp.data.data
              .catch (err) ->
                console.log err
          when "skyfall"
            axios.get('/jsondata/skyfall/data.json')
              .then (resp) ->
                Object.assign rootContent.$data.data, resp.data.data
              .catch (err) ->
                console.log err
          else
            return
      isInited = false
      window.addEventListener 'scroll', (e) ->
        if window.pageYOffset >= 200 && isInited == false
          vContentEl = document.querySelector "#vcontent"
          getPageData(vContentEl.getAttribute("data-page"))
          isInited = true
          return
        if window.pageYOffset < 200 && isInited == true
          contentProxy = proxy()

          Object.assign rootContent.$data, contentProxy
          isInited = false

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question