6 html javascript symfony twig
我想用包含 JavaScript 的下拉列表显示电影的投票，但我不知道在 Twig 模板中使用 JavaScript 的正确方法是什么。我有query.dropdown.js和。在我有：modernizr.custom.63321.js...\PYSBundle\Resources\public\jsbase.html.twig
(...)
<script src="js/modernizr.custom.63321.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropdown.js"></script>
<script type="text/javascript">
$( function()
{
$( '#cd-dropdown' ).dropdown();
});
</script>
</body>
</html>
其中我有frontend.html.twig：base.html.twig
{% block javascripts %}
{% javascripts '@PYSBundle/Resources/public/js/jquery.dropdown.js' %}
<script src="{{ asset_url }}" type="text/javascript"></script>
{% endjavascripts %}
{% javascripts '@PYSBundle/Resources/public/js/modernizr.custom.63321.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
最后，在votaciones.html.twigfronted.html.twig` 的扩展中，我得到了：
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Select a vote -</option>
<option value="1" class="one">1</option>
<option value="2" class="two">2</option>
<option value="3" class="three">3</option>
<option value="4" class="four">4</option>
<option value="5" class="five">5</option>
<option value="6" class="six">6</option>
<option value="7" class="seven">7</option>
<option value="8" class="eight">8</option>
<option value="9" class="nine">9</option>
<option value="10" class="ten">10</option>
</select>
这就是我做这件事的方式
首先，定义您在此应用程序中一直使用的库并将它们放入app/Resources/public/js/文件夹中
app/Resources/public/js/
然后，创建一个assetic.asset来轻松获取它们
config.yml
assetic:
assets:
libraries:
inputs:
- '%kernel.root_dir%/Resources/public/js/jquery.min.js'
- '%kernel.root_dir%/Resources/public/js/jquery.dropdown.js'
- '%kernel.root_dir%/Resources/public/js/modernizr.js'
然后，创建一个 js 文件来保存您的 javascript 捆绑逻辑
@Bundle/Resources/public/js/frontbundle.js
(function(window, document, $, undefined) {
// Define the routes to deffer execution of javascript
// "all" matches all the pages
// "bodyId" defines the ID of the body
var Routes = {
'all': [ 'hello' ],
'bodyId': [ 'foo' ]
}
var Mods = {
hello: function() {
console.log('Hello world');
},
foo: function() {
console.log('Foobar');
}
}
function frontbundle() {
this.bodyId = document.getElementsByTagName("body")[0].getAttribute('id');
}
frontbundle.prototype = {
init: function() {
this.run('all');
this.run(this.bodyId);
},
run: function(id) {
var route = Routes[id];
if (undefined === route) {
return;
}
for (var i = 0; i < route.length; i++) {
Mods[route[i]]();
}
}
}
$(document).ready(function() {
var app = new frontbundle;
app.init();
})
})(window, document, jQuery)
我延迟执行 javascript 的方法需要id为<body>每个页面设置一个 。
然后，只需将它们全部导入到您的基本模板中
@Bundle/Resources/views/base.html.twig
{% javascripts
'@libraries'
'@Bundle/Resources/public/js/frontbundle.js'
filter='yui_js'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
| 归档时间： |
|
| 查看次数： |
29092 次 |
| 最近记录： |