Question

我想在我的播放应用程序中实现一些简单的客户端功能。我有一个复选框，当勾选时，我想要显示一个html div。这是我的复选框scala / html

@checkbox(
                plotDetailForm("plantingFlag"),
                '_label -> "Planting plot",
                '_onclick -> "javascript:togglePlanting('block');"
            )

当在浏览器中呈现时，不包括onclick。这是来源：

<input type="checkbox" id="plantingFlag" name="plantingFlag" value="true" checked >

我想知道我可以在我的@checkbox

上点击客户端

Answer 1

为Play编写Javascript的方法！模板是导入外部文件。

请参阅http://www.playframework.com/documentation/2.2.x/Assets

对于您的功能，此外部文件应包含：

$(document).ready(function() {
    initCheckbox();
});

function initCheckbox(){
    $('#plantingFlag').change(function(){
        console.log("toggle");
        togglePlanting('block');
    });
}

Answer 2

使用不带下划线的参数：

@checkbox(
    plotDetailForm("plantingFlag"),
    '_label -> "Planting plot",
    'onclick -> "javascript:togglePlanting('block');",
    'foo -> "bar"
)

如docs中所述：

注意：所有额外参数都将添加到生成的HTML中，但名称以_字符开头的参数除外。以下划线开头的参数保留给字段构造函数参数（稍后我们将看到）。

Answer 3

感谢你们两位发帖。我决定让它工作。省略_下划线是我需要的。这种调用javascripts的方式对我来说更直接。

我最后得到了一个外部脚本声明：

<script src="@routes.Assets.at("javascripts/toggle.js")"></script>

javascript（toogle.js），首先检查页面上的复选框状态，并相应地设置div的可行性：

$(document).ready(function() {
var c = document.getElementById("plantingFlag");
if(c.checked == 1){
    document.getElementById("block").style.display = 'block';
} else{
    document.getElementById("block").style.display = 'none';
}
});

function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
    e.style.display = 'none';
else
    e.style.display = 'block';
}

最后是复选框

@checkbox(
                plotDetailForm("plantingFlag"),
                '_label -> "Planting plot",
                'onclick -> "javascript:toggle_visibility('block');"
            )

使用onclick事件播放框架scala模板

3 个答案: