피닉스 링크 방식 : 부트 스트랩 드롭 다운에 내 피닉스 응용 프로그램에서

하는 <% = 링크 ..., 방법을 작동하지 않습니다 삭제 :> %를 삭제 부트 스트랩에 드롭이 작동하지 않습니다피닉스 링크 방식 : 부트 스트랩 드롭 다운에 내 피닉스 응용 프로그램에서

<ul class="nav navbar-nav navbar-right"> 
    <%= if [email protected]_user do %> 
     <li> <%= link "Log In" , to: session_path(@conn, :new) %></li> 
    <% else %> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
      Hi!, <%= @conn.assigns.current_user.username %> 
      <b class="caret"></b> 
     </a> 
     <ul class="dropdown-menu"> 
      <li><%= link "Log out", to: session_path(@conn, :delete, @conn.assigns.current_user), method: "delete" %></li> 
      <li> <%= link "Log In" , to: session_path(@conn, :new) %></li> 
     </ul> 
     </li> 
    <% end %> 
    </ul>

하지만 "드롭 다운 메뉴"외부에서 만들면 잘 작동합니다.
< % = link ... %>을 < % = button ... %>로 변경하면 잘 작동합니다!

내 brunch.js 내가 문제가 자바 스크립트와 관련이 생각 플러그인

에 말대꾸

plugins: { 
    babel: { 
    // Do not use ES6 compiler in vendor code 
    ignore: [/web\/static\/vendor/] 
    }, 

    sass: { 
    options: { 
     includePaths: ["node_modules/bootstrap-sass/assets/stylesheets"], // tell sass-brunch where to look for files to @import 
     // minimum precision required by bootstrap-sass 
     //precision: 8 
    }, 
    precision: 8 
    }, 
    copycat: { 
    "fonts": ["node_modules/bootstrap-sass/assets/fonts/bootstrap"] // copy node_modules/bootstrap-sass/assets/fonts/bootstrap/* to priv/static/fonts/ 
    } 
}, 

... 
... 

npm: { 
    enabled: true, 
    whitelist: ["phoenix", "phoenix_html", "jquery"], 
    globals: { // bootstrap-sass' JavaScript requires both '$' and 'jQuery' in global scope 
    $: 'jquery', 
    jQuery: 'jquery', 
    bootstrap: 'bootstrap-sass' // require bootstrap-sass' JavaScript globally 
    } 
}

을 포함,하지만 나는 그것을 해결하는 방법을 모르겠어요.
누군가 동일한 문제가 있습니까? 감사!

출처

2016-10-08 Emillio He

는 "작동하지 않습니다"당신은 아무 일을 의미하지? 또는 적절하게 스타일링되지 않았습니까? 아니면 아무것도 볼 수 없습니까? 또는 다른 것? – Dogbert

아무 것도하지 않았습니다. URL 끝에 "#"가 붙습니다. –

'phoenix_html'을 올바르게 포함하고 있습니까? 새로운 프로젝트에서 브런치 설정은'javascripts : {joinTo : "js/app.js"}'이고'app.js'에는'import "phoenix_html"및'link method : : delete'가 작동합니다 이걸로. 또한 생성 된'priv/static/js/app.js'에'phoenix_html'이 포함되어 있는지 확인할 수 있습니까? – Dogbert

문제는 부트 스트랩의 JavaScript 부분에서 비롯됩니다.

여기 (v3.3.7에 라인 910) bootstrap.js에서 문제가되는 라인이다 :

.on('click.bs.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })

이 당신의 연결은 당신이 <form> 태그에 링크를 바꿈되지해야 하나, 작업 또는이 이벤트 핸들러를 제거하기 위하여는, 당신의 app.js에 다음 코드를 포함하여 : 당신이 그것을 클릭하면함으로써

$(document).off('click.bs.dropdown.data-api', '.dropdown form');

출처

2016-10-11 16:29:53 Oskar

예! 그것은 작동합니다! 고마워요. 오스카. –

피닉스 링크 방식 : 부트 스트랩 드롭 다운에 내 피닉스 응용 프로그램에서

답변

관련 문제