๋๋ ์ฝ๊ฐ์ ์ฌํ์ ์ผ์ผํค๋ ํด์๋ฑ ์ด ์๋ URL์ ์ฌ์ฉํ๋ ค๊ณ ํฉ๋๋ค.
๋ด๊ฐ ํ ์คํธํ๋ฉด์ ๋๋ ์ด๊ฒ์ํ๋ค.
<a href="#" onclick="router.navigate('/albums/<%= album.id %>', true); return false;">Show</a>
URL์ด ์ ๋ฐ์ดํธ๋์์ง๋ง ๋ผ์ฐํฐ๊ฐ ํธ์ถ๋์ง ์์ต๋๋ค. ์ฒ์์๋ ๊ฒฝ๋ก๊ฐ ์ผ์นํ์ง ์๋๋ค๊ณ ์๊ฐํ์ง๋ง ํ์ด์ง๋ฅผ ์๋ก ๊ณ ์น๋ฉด ๊ฒฝ๋ก๊ฐ ์ฑ๊ณต์ ์ผ๋ก ์ผ์นํฉ๋๋ค.
๊ทธ๋ฐ ๋ค์ ๋๋ ์ด๊ฒ์ ์๋ํ์ต๋๋ค.
<a href="#" onclick="router.navigate('/albums/<%= album.id %>', true);">Show</a>
๊ทธ๋ฆฌ๊ณ ๋ชจ๋ ๊ฒ์ด ์ ์๋ํ๋ฉฐ ํด์ ๋ณ๊ฒฝ์ด ํธ๋ฆฌ๊ฑฐ๋ ๊ฒฝ์ฐ์๋ง ๋ผ์ฐํฐ๊ฐ ํธ์ถ๋๋ ๊ฒ์ฒ๋ผ ๋ณด์ ๋๋ค.
์ด๋์
/ ์ ๊ฑฐํ๋ฉด ์๋ํฉ๋๋ค.
๊ฒฝ๋ก์ ์ ํํ ์ผ์นํด์ผ ํฉ๋๋ค.
์ด๊ฒ์ ๊ฒฝ๋ก๋ฅผ ๊ฐ์ ๋ก ๋ค์ ๋ก๋ํ๋ ค๊ณ ํ ๋ ์ด์ ์ ๊ฒช์๋ router.navigate()
์ ํฅ๋ฏธ๋ก์ด ๋์์
๋๋ค. ๋ด๊ฐ ํ ์ผ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
Backbone.history.loadUrl( Backbone.history.fragment )
API์ ์ผ๋ถ๋ก _๋ช
์์ ์ผ๋ก_ ๋ฌธ์ํ๋์ด ์์ง๋ ์์ง๋ง ํ์คํ ์์
์ ์๋ฃํฉ๋๋ค. router.navigate( 'current/path', true )
๊ฐ ๊ฒฝ๋ก ์ฒ๋ฆฌ๊ธฐ๋ฅผ ๋ค์ ํธ์ถํ๋๋ก ํธ๋ฆฌ๊ฑฐํด์ผ ํ๋ค๋ ๊ฒ์ด ํฉ๋ฆฌ์ ์ผ๋ก ๋ณด์
๋๋ค.
๋ค๋ฅธ ์ฌ๋์ด ์ด๊ฒ์ ๊ด์ฌ์ ๊ฐ๊ณ ์์ต๋๊น?
๋๋ ๋ํ์ด ๋ฌธ์ ์ ๋ถ๋ช์ณค๋ค. ๋ด ๊ตฌ์ฒด์ ์ธ ์ฌ์ฉ ์ฌ๋ก๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
๋ชจ๋ ํ๋ฉด ํฌ๊ธฐ์ ๋ฐ์ํ ์ธํฐํ์ด์ค๋ฅผ ์ ๊ณตํ๊ธฐ ์ํด ๋ฏธ๋์ด ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ๊ณ ์์ต๋๋ค. ๋ด ๋ณด๊ธฐ์๋ ๋ฏธ๋์ด ์ฟผ๋ฆฌ์ ์๋ตํ์ง ์๋ ์ผ๋ถ ์์๊ฐ ์์ผ๋ฏ๋ก ํฌ๊ธฐ ์กฐ์ ์ด๋ฒคํธ๋ฅผ ์์ ํ๊ณ ํ์ํ ๊ฒฝ์ฐ ํ์ด์ง๋ฅผ ๋ค์ ๋ ๋๋งํ๋ ํจ์๋ฅผ ์์ฑํ์ต๋๋ค. ๊ฐ๋ณ ๋ทฐ๋ฅผ ์ฐธ์กฐํ๊ณ ๋ ๋๋งํ๋ ๋์
router.navigate(Backbone.history.fragment, true)
Backbone.history๋ฅผ ์ ํ ์ฐธ์กฐํ์ง ์์๋ ๋ฉ๋๋ค. ๋ผ์ฐํฐ์ ์๋ก ๊ณ ์นจ ๋๋ ๋ค์ ๋ก๋ ๋ฐฉ๋ฒ์ด ์์ผ๋ฉด ๊ฐ์ฅ ์ข์ต๋๋ค.
router.refresh(true);
๋๋ ๊ฐ์ ๋ฌธ์ ๊ฐ ์์๋ค. @Ansman ๊ฒฝ๋ก๊ฐ ๋ฌด์์ธ์ง ๋ณด์ฌ์ค ์ ์์ต๋๊น? ๋ด ๋ฌธ์ ๋ ๊ธฐ๋ณธ ๋ฃจํธ์ด๋ฏ๋ก ํด์๋ฅผ ๊ฐ์ ธ์ฌ ๋ ์ ํ ์ฌ๋์๊ฐ ๊ธฐ๋ก์ ์ํด ์๋์ผ๋ก ์ ๊ฑฐ๋๋ค๋ ๊ฒ์ ๋๋ค.
์ -- ๋ผ์ฐํธ๋ navigation() ํธ์ถ์์ ์ ํ ์ฌ๋์๋ฅผ ๊ฐ์ ธ์๋ ์ ๋ฉ๋๋ค. ์ฆ, ๋ชจ๋ ์ ํ ์ฌ๋์๋ฅผ ๊ฐ์ ๋ก ์ ๊ฑฐํ๋ ๋ง์คํฐ์ ๋ํ ์ปค๋ฐ์ด ์์ผ๋ฏ๋ก ๋ ์ด์ ๋ฒ๊ทธ๊ฐ ์๋ ๋์์ผ๋ก ์ด์ด์ง์ง ์์์ผ ํฉ๋๋ค.
๋ง์ง๋ง์ผ๋ก, ๋ผ์ฐํฐ๋ ๊ฒฝ๋ก๊ฐ ์ค์ ๋ก ๋ณ๊ฒฝ๋ ๊ฒฝ์ฐ์๋ง ์คํ๋์ด์ผ ํฉ๋๋ค.
๊ฒฝ๋ก๊ฐ ํด์์์ ๋ณ๊ฒฝ๋์ง ์์ ๊ฒฝ์ฐ์๋ router.navigate("route", true)์ ๋ํ ๋ช ์์ ํธ์ถ์ด ๊ฒฝ๋ก๋ฅผ ํธ๋ฆฌ๊ฑฐํด์ผ ํ๋ค๋ ์ ์์ ์ฐจ์ํ๊ณ ์ถ์ต๋๋ค.
@danroberts ํด์๊ฐ ๋ณ๊ฒฝ๋์ง ์์ ๊ฒฝ์ฐ ๊ฒฝ๋ก๋ฅผ ๊ฐ์ ๋ก ํธ๋ฆฌ๊ฑฐํ๋ ๊ฒ์ ํ์ฌ๋ก์๋ ๋ถ๊ฐ๋ฅํ ๊ฒ ๊ฐ์ต๋๋ค. ๋๋ router.navigate("route/", {trigger:true}); ์๋ํ์ง ์์ต๋๋ค. ๋น ๋ฅธ ํดํน์ ๋จ์ํ router.route_name()
๋ฅผ ํธ์ถํ๋ ๊ฒ์
๋๋ค.
@olalonde ์์ @wookiehangover ์ ๋ฐฉ๋ฒ์ ์ฌ์ฉํ์ฌ ์ข์ ๊ฒฐ๊ณผ๋ฅผ ์ป์์ต๋๋ค. ๋ด๊ฐ ์ด๋ํ๋ ค๋ ๊ฒฝ๋ก๊ฐ ํ์ฌ ํด์์ ๋์ผํ์ง ํ์ธํ ๋ค์ router.navigate ๋๋ history.loadURL์ ํธ์ถํ๋ ์ฌ์ฉ์ ์ ์ ํจ์๋ฅผ ์์ฑํ์ต๋๋ค.
์ด๊ฒ์ด ์ต์ ๋ฐฐ์ด์ ์ผ๋ถ์ผ ์ ์๋ ๊ฒ์ด ํฉ๋ฆฌ์ ์ผ๋ก ๋ณด์ ๋๋ค. ์๋ฅผ ๋ค์ด, ์๊ด์์ด ๊ฒฝ๋ก๋ฅผ ํธ๋ฆฌ๊ฑฐํ๋ ค๋ฉด ์๋ก ๊ณ ์นจ:true ์ ๊ฐ์ ๊ฒ์ ๋๋ค. ๋ํ {trigger: true}๊ฐ ๋ ผ๋ฆฌ์ ์ผ๋ก ๊ฒฝ๋ก๋ฅผ ํธ๋ฆฌ๊ฑฐํ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ ๋ฌธ์ ์ ๋ฐ์ดํธ๊ฐ ์์๋๋ก ๋ณด์ผ ์๋ ์์ต๋๋ค...
์ด ๋ฒ๊ทธ๋ฅผ ๋ซ๋ ๋ฐ ๋ฌธ์ ๊ฐ ์์ต๋๋ค.
๋ฐฑ๋ณธ์ ์ฌ์ฉํ๋ ํต์ฌ ํฌ์ธํธ๋ ๊ฒฝ๋ก์ ๊ตฌ๋ฌธ ๋ถ์์ ์ฒ๋ฆฌํ ๋ค์ ๊ฒฝ๋ก๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ํจ์๋ฅผ ํธ์ถํ๋ ๊ฒ์ ๋๋ค. ๋ฐฑ๋ณธ์ ํตํด "๋ค์ ๋ก๋"๊ฐ ๊ด์ฐฎ์ ๊ฒฝ์ฐ๋ฅผ ์ง์ ๊ฒฐ์ ํ ์ ์๋ ๋ฅ๋ ฅ์ด ์๊ธฐ ๋๋ฌธ์ ์ฐ๋ฆฌ๋ ์ด ํจ๊ณผ๋ฅผ ์ํด ๋ญ๊ฐ๋ฅผ ํด์ผ ํฉ๋๋ค:
if (url == window.location.pathname + window.location.search) {
Backbone.history.loadUrl(url);
return false;
}
else if (app.router.isHandled(url)) {
Backbone.history.navigate(url, {
trigger: true
});
return false;
}
์๋ํฉ๋๊น? ์, ํ์ง๋ง ์ด๊ฒ์ด ํ๋ซํผ์ ์์ผ๋ฉด ์ข์ ์์ ํ ์ ํจํ ์ฌ์ฉ ์ฌ๋ก์ธ ๊ฒ ๊ฐ์ต๋๋ค.
์ฐธ๊ณ ๋ก ์ด ์ค๋ ๋ ์ ์ #1214๋ฅผ ๋ณด๊ณ ๊ฐ์ ๋๊ธ์ ์ฌ๋ ธ์ต๋๋ค.
๋ฐฑ๋ณธ ๋ผ์ฐํฐ๋ URL ๋ณ๊ฒฝ ์ด๋ฒคํธ๋ฅผ ์์ ํ์ฌ ๋ผ์ฐํ ๋ ์์ ์ ํธ๋ฆฌ๊ฑฐํ๊ธฐ ๋๋ฌธ์ ์ด๋ฌํ ์ ํ์ ์์ ์ ํ์ฉํ์ง ์์ต๋๋ค.
์์ ์ ํธ๋ฆฌ๊ฑฐํ๊ณ ๋ผ์ฐํฐ์ ์์ ์ ์ฌ์ค์ ํ๋ ์ปจํธ๋กค์ ๊ฐ๋ก์ฑ์ผ ํฉ๋๋ค.
์ฌ๊ธฐ์ jsFiddle ์์ ๋ฅผ ๋ง๋ค์์ต๋๋ค.
http://goo.gl/wํ๋ก
์ฌ๊ธฐ ๋ธ๋ก๊ทธ ๊ฒ์๋ฌผ:
http://goo.gl/mJM2i
์ค๋ ์ด ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ฌ 2์ผํธ๋ฅผ ์ถ๊ฐํ๊ณ ์ถ์ต๋๋ค.
trigger: true
๋ช
์์ ์ผ๋ก ์ค์ ํ ๋ ํด์๊ฐ ๋ณ๊ฒฝ๋์ง ์๋ ํ ์ด๋ฒคํธ๋ฅผ ํธ๋ฆฌ๊ฑฐํ์ง ์๋ ์ง๊ด์ ์ด์ง ์์ ๋์์ฒ๋ผ ๋ณด์
๋๋ค.
๋ด ํฌํ๋ ์กฐ๊ฑด์ ๊ด๊ณ์์ด ๊ฒฝ๋ก๋ฅผ ํธ๋ฆฌ๊ฑฐํ๋ trigger: true
์ ์ฐฌ์ฑํฉ๋๋ค.
์ค์ ์ฌ๋ก ์ค ํ๋๋ ํ์ฌ ํ์ด์ง๋ฅผ ์๋ก ๊ณ ์น๊ณ ์ ํ ๋ trigger: true
์ ํ์ฌ ๋์์ผ๋ก๋ ๋ถ๊ฐ๋ฅํ ๊ฒ์
๋๋ค.
KenPerkins ๋ฐฉ๋ฒ์ ๊ฒฝ์ฐ +1 ๋๋ BB ๋ผ์ฐํฐ์ ํตํฉ๋๋ ๊ฒ๊ณผ ์ ์ฌํ ๊ฒ.
{ trigger: true }๊ฐ ์ ๋ฌ๋ ๊ฒฝ์ฐ ๋์ผํ ํ์ด์ง์์ ํ๋ก์ธ์ค ํ์์ ๋ํ +1
roter.navigate()
๋ฉ์๋๊ฐ ๋ด ์์ฉ ํ๋ก๊ทธ๋จ์์ ์๋ํ์ง ์๋ ์ด์ ๋ฅผ ์ฐพ์ผ๋ ค๊ณ 3์๊ฐ์ ๋ณด๋์ต๋๋ค. BB ๋ฌธ์์๋ ์ด ๋ฌธ์ ์ ๋ํ ์๋ฆผ์ด ํฌํจ๋์ด์ผ ํ๋ค๊ณ ์๊ฐํฉ๋๋ค.
๋ด ๋ชป์๊ฒผ์ง๋ง ๋น ๋ฅธ ํด๊ฒฐ์ฑ
์ ์ค์ ๋ฉ์๋๋ณด๋ค ๋จผ์ router.navigate()
๋ฉ์๋๋ฅผ ํธ์ถํ๋ ๊ฒ์ด์์ต๋๋ค.
router.navigate();
router.navigate("app", true);
์ง๊ธ์ ํจ๊ณผ๊ฐ ์์์ต๋๋ค. ํ์ง๋ง refresh:true
์ต์
์ด ์์๋ค๋ฉด ๋๋ ๊ทธ๊ฒ์ ํ์คํ ์ฌ์ฉํ ๊ฒ์
๋๋ค ...
์ค๋ ๋ง ๋ฐ์ํ ๋ฌธ์ ์ด๋ฏ๋ก ์ด๊ฒ์ ๋ํ ์๊ฐ์ ๊ทธ๋๋ก ๋์ญ์์ค. {trigger: true}
์ต์
ํด์๋ฅผ router.navigate์ ๋ช
์์ ์ผ๋ก ์ ๋ฌํ ๋ ๊ฒฝ๋ก๊ฐ ํธ์ถ๋์ง ์๋๋ค๋ ๊ฒ์ ๋งค์ฐ ์ง๊ด์ ์ด์ง ์์ ๊ฒ ๊ฐ์ต๋๋ค. @onuradsay ๊ฐ ์ ์ํ ๊ฒ๊ณผ ๊ฐ์ refresh:true
์ต์
์ ์ถ๊ฐ๋ฅผ ๋ณด๊ณ ์ถ์ต๋๋ค .
@patrickod ๋ฐ @onuradsay ์์ด๋์ด์ ์ค์ฉ์ฑ +1
+1. ์ฐ๋ฆฌ๋ ์ฌ์ ํ ์ด๋ฒคํธ๋ฅผ ์์ ํ ์ ์์ด์ผ ํ๊ณ ์ฑ์์ ์๋ก ๊ณ ์นจ์ด ์์ฒญ๋์๋์ง ํ์ธํ ์ ์์ด์ผ ํฉ๋๋ค. ์ฐ๋ฆฌ๋ ์์์ ์ธ๊ธํ ๋ง์ ํดํน์ผ๋ก ์ด๊ฒ์ ์์๋ผ ์ ์์ง๋ง ์์ฃผ ๊นจ๋ํ์ง๋ ์์ต๋๋ค. ์ด ๋์์ ๋ผ์ฐํฐ์ ๋ฃ์ ๋งํผ ์ผ๋ฐ์ ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค.
๊ทธ๋ด ์ผ์ ์์ ๊ฒ ๊ฐ์์. ์ฌ๋๋ค์ด ๊ทธ๊ฒ์ ์๊ตฌํ๋ค๋ ์ฌ์ค์ ์ค์ ๋ก ์ด๋ฒคํธ๋ฅผ ๋ฌด์กฐ๊ฑด์ ์ผ๋ก ์์ํ๋ ๊ฒ๋ณด๋ค _remove_ trigger:true
๋ ๋ง์ ์๊ทน์ ์ค๋๋ค. ์ค๋ช
ํ๊ฒ ์ต๋๋ค:
Backbone์ ์ด๋ฒคํธ๋ ์ํ๊ฐ ๋ณ๊ฒฝ๋ ๋ ์๋ฆผ์ ๋ฐ๋ ๊ฒ์ ๊ดํ ๊ฒ์ ๋๋ค. ๋ชจ๋ธ์์์ ๋ง์ฐฌ๊ฐ์ง๋ก ๋ค์์ ์ํํฉ๋๋ค.
model.set({title: "Boom"})
model.set({title: "Boom"})
... ์ํ๊ฐ ๋ณ๊ฒฝ๋์ง ์์์ผ๋ฏ๋ก ๋ ๋ฒ์งธ๋ก ์ด๋ฒคํธ๋ฅผ ํธ๋ฆฌ๊ฑฐํ์ง ์์ต๋๋ค. ... ์ด๋ฏธ ์๋ ์์น๋ก ์ด๋ํ๋ ค๊ณ ์๋ํ๋ ๊ฒ์ ์ํ ๋ณ๊ฒฝ์ด _์๋๋๋ค_, ์ด๋ฒคํธ๋ฅผ ํธ๋ฆฌ๊ฑฐํ์ง ์์ต๋๋ค.
๋ฒํผ์ ํด๋ฆญํ ๋๋ง๋ค ์ฝ๋ฐฑ์ ์คํํ๋ ค๋ฉด ์ฝ๋ฐฑ์ ์ถ๊ฐํ๊ธฐ๋ง ํ๋ฉด ๋ฉ๋๋ค. ๋๋ Backbone์ ์ด๋ฒคํธ๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฅผ ์ํํ๋ ค๋ฉด object.trigger("myEvent")๋ฅผ ํธ์ถํ๋ฉด ๋ฉ๋๋ค.
trigger:true
๋์ true๋ก ๊ฐ์ ํ๊ณ silent:false
์ต์
์ด ์์ด์ผ ํฉ๋๋ค.
์ด ๊ธฐ๋ฅ์ ์ถ๊ฐํ์ง ์์ผ๋ฉด ๋ฒํผ ํธ๋ค๋ฌ์์ ํญ์ ์ด์ ๊ฐ์ ์์ ์ ์ํํด์ผ ํฉ๋๋ค.
if (Backbone.history.fragment === 'foo') {
Backbone.history.loadUrl(Backbone.history.fragment);
} else {
router.navigate('foo', {'trigger': true});
}
ํ๋ฅญํ ํธ๋ฆญ์ ์ ๊ณตํ @dankantor ์๊ฒ ๊ฐ์ฌ๋๋ฆฝ๋๋ค!
์ด ์ฌ์ฉ ์ฌ๋ก(๋์ผํ ํ์ด์ง/ํด์๋ฅผ ๊ฐ์ ๋ก ๋ค์ ๋ก๋ํ๊ธฐ ์ํด)๋ฅผ ์ํํด์ผ ํ๋ ๊ฒฝ์ฐ history.fragment ๋์ Backbone.history.getFragment()๋ฅผ ์ฌ์ฉํ์ฌ ๊ธฐ๋ก์ ์์ฑ์ ์ ๊ทผํ์ง ์๋๋ก ํ์๊ฒ ์ต๋๊น? ๋ ๊นจ๋ํด ๋ณด์ ๋๋ค.
๊ฐ์ ๋ก ๋ค์ ๋ก๋ํ๊ธฐ ์ํด Backbone.history.refresh ๋ฉ์๋๋ฅผ ๋ง๋ค์์ต๋๋ค. ๊ทธ๋ฐ ๋ค์ ์ผ๋ถ ํ๋ก์ ํธ์์๋ ํด์๊ฐ ๋ณ๊ฒฝ๋์๋์ง ์ฌ๋ถ์ ๊ด๊ณ์์ด ๋ค์ ๋ก๋ํ๋๋ก ๊ธฐ๋ณธ ํ์ ๋์์ ์ฌ์ ์ํฉ๋๋ค.
_.extend(Backbone.History.prototype, {
refresh: function() {
this.loadUrl(this.fragment);
}
});
var routeStripper = /^[#\/]/;
var origNavigate = Backbone.History.prototype.navigate;
Backbone.History.prototype.navigate = function (fragment, options) {
var frag = (fragment || '').replace(routeStripper, '');
if (this.fragment == frag)
this.refresh();
else
origNavigate.call(this, fragment, options);
};
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ด๊ฒ์ ๊ฒฝ๋ก๋ฅผ ๊ฐ์ ๋ก ๋ค์ ๋ก๋ํ๋ ค๊ณ ํ ๋ ์ด์ ์ ๊ฒช์๋
router.navigate()
์ ํฅ๋ฏธ๋ก์ด ๋์์ ๋๋ค. ๋ด๊ฐ ํ ์ผ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.API์ ์ผ๋ถ๋ก _๋ช ์์ ์ผ๋ก_ ๋ฌธ์ํ๋์ด ์์ง๋ ์์ง๋ง ํ์คํ ์์ ์ ์๋ฃํฉ๋๋ค.
router.navigate( 'current/path', true )
๊ฐ ๊ฒฝ๋ก ์ฒ๋ฆฌ๊ธฐ๋ฅผ ๋ค์ ํธ์ถํ๋๋ก ํธ๋ฆฌ๊ฑฐํด์ผ ํ๋ค๋ ๊ฒ์ด ํฉ๋ฆฌ์ ์ผ๋ก ๋ณด์ ๋๋ค.๋ค๋ฅธ ์ฌ๋์ด ์ด๊ฒ์ ๊ด์ฌ์ ๊ฐ๊ณ ์์ต๋๊น?