받침대 표현이 작동하지 않은 후에 reset()

StackOverflow https://stackoverflow.com//questions/25077763

  •  02-01-2020
  •  | 
  •  

문제

내 팀은 현재 사용하여 받침대 시리즈를 보여주의 경고합니다.각각의 경고:

  • 렌더링하기으로 받침대
  • 시작 조류 관찰 widgets.js 는 일부 DOM 조작(을 포함하는 트윗)
  • 변경된 데이터에서는 보기후(용자를 선택하면 다른 경)

이후 트위터 DOM 변경을 방해 받침대의 가상 DOM,우리가 현재 사용 ractive.reset() 를 재설정 DOM 후 Twitter widgets.js 마감재 reset() 을 방지하는 전체의 무리 돔 같은 문제 cannot appendChild of null 는 것이기 때문에 발생할 Twitter 조작 DOM 받침대 뒤에 돌아왔다.

그러나 우리 후 실행 ractive.reset() 식 더 이상 작동하는 것.

이것이 옳게 처리하는 방법에 다른 라이브러리를 조작할 수 있습 DOM?나는 어떻게 식은 후 작업을 계속 합의 reset() ?

여기에 빠른 데모-주 식의 작동하기 전에 reset() 하지만 이후:

    <body>
        <h1>test</h1>
        <div class="bound"></div>
        <script src='http://cdn.ractivejs.org/latest/ractive.js'></script>

        <script>
            var binding = new Ractive({
                el: document.querySelector('.bound'),
                data: {
                    name: 'mike',
                    swaggify: function(string) {return 'SWAG'+string}
                },
                template: '<p>Hello, {{ swaggify(name) }}!</p>'
            })

            binding.reset().then(function(){
                binding.data.name = 'steve'
            })
        </script>
    </body>

고 의무 JSFiddle

도움이 되었습니까?

해결책

를 호출할 때 ractive.reset(), 를 대체합니다 data 이 경우에는,포함 swaggify 기능입니다.만약 당신이 그것을 다시 잘 작동: http://jsfiddle.net/rich_harris/49JAK/

(주는 나 업데이트 코드 후 즉시화 binding.reset() -이 변화가 일어날 동시에, .then() 다만 예약할 수 있는 기능을 때 어떤 전환 완료했습니다.그것은 약속/A+준수하도록 내 코드 .then() 항상 있을 것입 비동기에서는 어떤 상황을 일으킬 수 있는 깜박,그래서 sync>비동기는 가능합니다.)

는 것을 원하지 않도록 할 수 있을 치료하는 데이터 포맷터 다르게한다.좋은 접근 방식은 포맷터에 prototypal data 체는 모든 다른에서 상속되:

var helpers = Ractive.defaults.data; // Ractive.defaults === Ractive.prototype
helpers.swaggify = function(string) {return 'SWAG'+string};

var binding = new Ractive({
  el: document.querySelector('.bound'),
  data: {
    name: 'mike',
    swaggify: function(string) {return 'SWAG'+string}
  },
  template: '<p>Hello, {{ swaggify(name) }}!</p>'
})

데모의 이 방법은 여기: http://jsfiddle.net/rich_harris/chYD6/.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top