받침대 표현이 작동하지 않은 후에 reset()
-
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>
해결책
를 호출할 때 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/.