使用Handlebar模板和bootstrap模态

时间:2014-01-10 09:12:56

标签: javascript jquery twitter-bootstrap handlebars.js

我有一个带手柄脚本的引导模式 -

<script id="data-template" type="x-handlebars-template">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">Add Data</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="form" enctype="multipart/form-data" action="upload.php" method="POST">
                        <fieldset>
                            <div class="control-group">
                                <label class="control-label" for="input01">Message</label>
                                <div class="controls">
                                    <textarea class="input-xlarge" id="input01" name="text" value="{{value}}"></textarea>
                                </div>
                            </div>

                        </fieldset>

                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary" name="submit" value="submit">
                        Save
                    </button>
                    <button name="cancel" value="cancel" class="btn btn-default" data-dismiss="modal">
                        Cancel
                    </button>
                </div>
                </form>
            </div>
        </div>
    </div>
</script>

现在点击按钮我打开模态以及onClick方法正在调用getDataWithId()方法来填充模态中的数据 -

<a href="#" class="btn btn-primary btn-xs pull-right"  data-toggle="modal" data-target="#myModal" onclick"getDataWithId(1)"><b>+</b> Add</a>

这是我的getDataWithId()方法。

 function getDataWithId(id){
    var newData;
    var theTemplateScript = $("#data-template").html(); 
    var theTemplate = Handlebars.compile (theTemplateScript); 
    $.get("http://localhost:8092/data_service.php?method=news&id="+id, 
        function(data, textStatus, jqXHR) {
            newData= $.parseJSON(JSON.stringify(data.data.posts));
            $(".modal").append (theTemplate(newData)); 

        }).fail(function(jqXHR, textStatus, errorThrown) {
        });
}

虽然模态打开得很好,但输入字段上没有显示数据。

0 个答案:

没有答案