这太神秘了。我是Handlebars的新手,我在制作AJAX点击提交按钮时只有1个帖子方法,而不是4个。
解释:我有一个带有ajax的照片标记。但是当点击提交时,会向ddbb发送2个帖子。当我更新视图时,另外2个帖子是对ddbb完成的。 4个POST方法总共而不是1.
在我的节目视图中:
<% if @photo.user = current_user %>
<script> $("#tp_tag_save").click(function() {
$.post("/users/<%= current_user.id %>/photos/<%= @photo.id %>/tags", {
"tag[name]" : $("#tag_name").val(),
"tag[location]" : $("#tag_location").val(),
"tag[price]" : $("#tag_price").val(),
"tag[coordinate_x]" : $("#tag_coordinate_x").val(),
"tag[coordinate_y]" : $("#tag_coordinate_y").val()
}).done(function (data) {
drawTag($("#tag_name").val(), $("#tag_price").val(), $("#tag_location").val(), $("#tag_coordinate_x").val(), $("#tag_coordinate_y").val()),
reDrawList();
});
modal("#tag_modal", "hide", 200);
});
</script>
<% end %>
我的Javascript
window.drawTag = function (name,price,location,coordinate_x,coordinate_y,tag_id) {
var source = $("#tag-template").html();
var template = Handlebars.compile(source);
var context = {price: price, name: name, location: location};
var tag_type = 'text'
var img_height = 0;
var img_width = 0;
tag = tag + 1;
err = 1;
var point = '<div class="point" id="tp_p_' + tag + '" style="left:' + coordinate_x + '%;top:' + coordinate_y + '%;"><div class="tp_circle" id="tp_circle_' + tag + '"></div><div class="tp_tooltip" id="tp_tp_' + tag + '"></div></div>';
/* Comprobamos que si name, description, location y price son distintos de vacio, se pinten las cosas */
if (name !== "" && location !== "" && price !== "") {
$("#tp_end_result").append(point);
$("#tp_circle_" + tag).append('<i class="icon-pin"></i>');
$("#tp_tp_" + tag).prepend(template(context));
$("#tp_r_" + tag).click( function () {
});
err = 0;
} else {
display_err("Fill out required fields");
$("#mensaje").html();
}
if (err == 0) {
var height = parseInt($("#tp_tp_" + tag).height(), 10) + 17;
var width = parseInt($("#tp_tp_" + tag).width(), 10) / 2 + 3;
if (img_height !== 0) {
height = img_height + 57;
width = img_width / 2 + 3;
img_height = 0;
img_width = 0;
}
$("#tp_tp_" + tag).css({"margin-left":"38px", "margin-top":"-10px"});
}
// /* Make Circle hover effect when tooltip is on hover */
// $("#tp_tp_" + tag).mouseenter(function() {
// $("#tp_tooltip_" + tag).mouseover();
// $("#tp_circle_" + tag).mouseover();
// });
}
我的车把模板
<!--Handlebars template -->
<script id="entry-template" type="text/x-handlebars-template">
<li class="listnone border_bottom_grey semi_padding thin">
<div class="circle"><i class="icon-pin"></i></div>
<span class="grey bold inline quarter_padding_left">
{{name}}</span>
<span class="small right white article_price">{{price}}</span></br>
<span class="quarter_padding_top inline lightgrey small">
<i class="icon-location-2 indent20 small"> </i> {{location}}</span>
</li>
</script>
<script id="tag-template" type="text/x-handlebars-template">
<ul class="listnone">
<li>
<h1 class="mbig tk-proxima-nova">{{name}}</h1></li>
<li class="block left"><i class="icon-location-2"></i> {{location}} </li>
<li><span class="small block bold right white article_price">{{price}}<span class="small">€</span></span></li>
</ul>
</script>
重绘列表功能
function reDrawList (){
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {price: $("#tag_price").val() + "€", name: $("#tag_name").val(), location: $("#tag_location").val()};
$( ".scrollable" ).prepend(template(context));
$(".tag_ad").hide();
};