0
Ich benutze Javascript (Backbone), um eine Webapplikation zu erstellen. Gerade jetzt stoße ich auf ein Problem, das ich nicht lösen kann. Ich habe eine Tabelle mit Daten und einigen anderen Kriterien ein ‚Sprint‘ (siehe Bild) image of adding a sprintIE Edge füllt Label nicht mit Daten vor, während Firefox und Chrome
hier ist der Blick auf die ‚postsprint‘
var PostSprint = Backbone.View.extend({
el: '.sprintform',
render: function(options) {
var that = this;
var teamId = options.id;
var latestSprint = new LatestSprint({id:teamId});
var AccessToken = Cookies.get('AccessToken');
latestSprint.url = 'rest/latestSprint'+'/'+ teamId + '/' + AccessToken;
latestSprint.fetch({
success: function (latestSprint) {
if(latestSprint.attributes.result=='NotLoggedIn'){
router.navigate('#/notloggedin', {trigger: true});
}
if(latestSprint.attributes.result=='TokenExpired'){
router.navigate('#/tokenexpired', {trigger: true});
}
if(latestSprint.attributes.result=='Ok'){
var template = _.template($('#create-sprint-template').html(),{latestSprint: latestSprint});
that.$el.html(template);
$(function() {
if (!Modernizr.inputtypes['date']) {
$('input[type=date]').datepicker({
dateFormat: "yy-mm-dd"
});
}
});
}
},
error: function (er){
alert("Error loading (fetch) the sprint view. line 7 in PostSprint.js");
Backbone.history.loadUrl();
}
});
},
events:{
'submit .submitsprint': 'postSprint',
'change #weeks' : 'changeEndDate',
'change #enddate' : 'changeWeeks'
},
changeWeeks: function (ev) {
var startdate = moment($("#startdate").val());
var enddate = moment($("#enddate").val());
var duration = moment.duration(enddate.diff(startdate));
var dayInt = duration.asDays();
var weekInt = Math.ceil(dayInt/7);
$("#weeks").val(weekInt);
},
changeEndDate: function (ev) {
var date = moment($("#startdate").val(), "YYYY-MM-DD");
date = moment(date).add('days', ($("#weeks").val() * 7)) ;
$("#enddate").val(moment(date).format('YYYY-MM-DD'));
},
postSprint: function (ev) {
var addSprintButton = $(ev.currentTarget);
addSprintButton.find("button").prop("disabled", true);
var sprintDetails = addSprintButton.serializeObject();
var tid = sprintDetails.teamid;
var sprint = new Sprint();
if (Date.parse(sprintDetails.startdate) < Date.parse(sprintDetails.enddate)){
var AccessToken = Cookies.get('AccessToken');
sprint.url = 'rest/sprint'+'/'+ AccessToken;
sprint.save(sprintDetails, {
success: function (sprint) {
if(sprint.attributes.result=='NotLoggedIn'){
router.navigate('#/notloggedin', {trigger: true});
}
if(sprint.attributes.result=='TokenExpired'){
router.navigate('#/tokenexpired', {trigger: true});
}
if(sprint.attributes.result=='Ok'){
//window.location.reload(true);
Backbone.history.loadUrl();
}
},
error: function (er){
alert("Error saving (save) the sprint view. line 53 in PostSprint.js");
}
});
}else{
alert("The start date must be earlier than the end date");
Backbone.history.loadUrl();
}
return false;
},
});
zu erstellen Wie man sehen kann ich die modernizr bin mit Bibliothek, um zu definieren, ob es eine native Datumsauswahl gibt, falls nicht, verwenden Sie jquery datepicker.
Und hier ist der Blick auf die sprintlist
var GetSprintList = Backbone.View.extend({
el: '.sprintlist',
render: function(options) {
var that = this;
var sprints = new Sprints();
var AccessToken = Cookies.get('AccessToken');
sprints.url = 'rest/sprints/'+ AccessToken;
sprints.fetch({
success: function() {
var latestSprint;
var latestSprintTime = 0;
for(x in sprints.models) {
var endDate = Date.parse(sprints.models[x].attributes.enddate.replace(/-/g, " "));
if(endDate > latestSprintTime)
latestSprint = sprints.models[x];
latestSprintTime = endDate;
}
if(latestSprint) {
var dt = new Date(latestSprint.get('enddate'));
var dayOfMonth = dt.getDate();
dt.setDate(dayOfMonth + latestSprint.get('weeks')*7);
var month =dt.getMonth()+1;
if(month<10){month = "0"+month}
var day = dt.getDate();
if(day<10){day = "0"+day}
var year = dt.getFullYear();
var newEndDate = year + '-' + month + '-' + day;
}
var template = _.template($('#sprint-list-template').html(), {sprints: sprints.models, latestSprint: latestSprint, newEndDate: newEndDate});
$("[type='date']").click(function() { $("[type='date']").datepicker('show'); });
that.$el.html(template);
$(function() {
if (!Modernizr.inputtypes['date']) {
$('input[type=date]').datepicker({
dateFormat: "yy-mm-dd"
});
}
});
},
error: function (er){
alert("Error loading (fetch) the Sprintlist view. line 8 in GetSprintList.js");
}
});
},
events:{
'click .normaltd': 'sprintDetails',
'click .nametd': 'changeSprintName',
'click .capacitytd': 'changeSprintCapacity',
'click .deleteFirstsprintinlist' : 'deleteFirstSprintInList',
'click .deleteLastsprintinlist' : 'deleteLastSprintInList',
'click .editsprintinlist' : 'sprintDetails',
'submit .submitsprint': 'postSprint',
'change #weeks' : 'changeEndDate',
'change #enddate' : 'changeWeeks'
},
changeWeeks: function (ev) {
var startdate = moment($("#startdate").val());
var enddate = moment($("#enddate").val());
var duration = moment.duration(enddate.diff(startdate));
var dayInt = duration.asDays();
var weekInt = Math.ceil(dayInt/7);
$("#weeks").val(weekInt);
},
changeEndDate: function (ev) {
var date = moment($("#startdate").val(), "YYYY-MM-DD");
date = moment(date).add('days', ($("#weeks").val() * 7)) ;
$("#enddate").val(moment(date).format('YYYY-MM-DD'));
},
postSprint: function (ev) {
var addSprintButton = $(ev.currentTarget);
addSprintButton.find("button").prop("disabled", true);
var sprintDetails = addSprintButton.serializeObject();
var tid = sprintDetails.teamid;
var sprint = new Sprint();
if (Date.parse(sprintDetails.startdate) < Date.parse(sprintDetails.enddate)){
var AccessToken = Cookies.get('AccessToken');
sprint.url = 'rest/sprint'+'/'+ AccessToken;
sprint.save(sprintDetails, {
success: function (sprint) {
if(sprint.attributes.result=='NotLoggedIn'){
router.navigate('#/notloggedin', {trigger: true});
}
if(sprint.attributes.result=='TokenExpired'){
router.navigate('#/tokenexpired', {trigger: true});
}
if(sprint.attributes.result=='Ok'){
//window.location.reload(true);
Backbone.history.loadUrl();
}
},
error: function (er){
alert("Error saving (save) the sprint view. line 53 in PostSprint.js");
}
});
}else{
alert("The start date must be earlier than the end date");
Backbone.history.loadUrl();
}
return false;
},
changeSprintName: function (ev) {
var newName = prompt("Geef een nieuwe naam op voor deze sprint");
if (newName === null) {
return; //break out of the function early
}
if(newName)
{
ev.currentTarget.innerHTML = newName;
var id = ($(ev.currentTarget).attr("id"));
//select the capacity element by id and classname
var capacity = parseInt($(("#" + id + " .capacitytd")).html());
var sprintDetails ={id:id, name:newName, capacity:capacity};
var sprint = new Sprint();
var sprints = new Sprints();
var AccessToken = Cookies.get('AccessToken');
sprint.url = 'rest/sprint/'+id+'/'+ AccessToken;
sprint.save(sprintDetails, {
success: function (sprint)
{
if(sprint.attributes.result=='NotLoggedIn'){
router.navigate('#/notloggedin', {trigger: true});
}
if(sprint.attributes.result=='TokenExpired'){
router.navigate('#/tokenexpired', {trigger: true});
}
},
error: function (er)
{
alert("Error updating (save) the sprint object. line 42 in GetSprintList.js");
}
});
}
},
changeSprintCapacity: function (ev) {
var newCapacity = prompt("Geef een nieuwe capaciteit op voor deze sprint");
if(newCapacity)
{
while(isNaN(newCapacity))
{
newCapacity = prompt("De waarde voor capaciteit moet een nummer zijn");
}
if(newCapacity)
{
ev.currentTarget.innerHTML = newCapacity;
var id = ($(ev.currentTarget).attr("id"));
newName = ($(("#" + id + " .nametd")).html());
var sprintDetails ={id:id, name:newName, capacity:newCapacity};
var sprint = new Sprint();
var sprints = new Sprints();
sprint.url='rest/sprint/'+id+'/'+Cookies.get('AccessToken');
sprint.save(sprintDetails,
{
success: function (sprint)
{
if(sprints.at(0).attributes.result=='NotLoggedIn'){
router.navigate('#/notloggedin', {trigger: true});
}
if(sprints.at(0).attributes.result=='TokenExpired'){
router.navigate('#/tokenexpired', {trigger: true});
}
},
error: function (er)
{
alert("Error updating (save) the sprint object. line 42 in GetSprintList.js");
}
});
}
}
},
sprintDetails: function (ev) {
var sprintid = $(ev.currentTarget.attributes.id.nodeValue);
//router.navigate('#/sprint/view/'+sprintid.selector , {trigger: true});
},
deleteFirstSprintInList: function (ev) {
var deleteSprintButton = $(ev.currentTarget);
deleteSprintButton.prop("disabled", true);
var sprintid = $(ev.currentTarget.attributes.id.nodeValue);
var sprint = new Sprint({id:sprintid.selector});
var id = ($(ev.currentTarget).attr("id"));
var AccessToken = Cookies.get('AccessToken');
sprint.url = 'rest/sprint/first/'+ id +'/'+AccessToken;
sprint.destroy({
success: function(){
//window.location.reload(true);
Backbone.history.loadUrl();
},
error: function (er){
alert("Error deleting (destroy) the sprint view. line 8 in GetSprintList.js");
}
});
},
deleteLastSprintInList: function (ev) {
var deleteSprintButton = $(ev.currentTarget);
deleteSprintButton.prop("disabled", true);
var sprintid = $(ev.currentTarget.attributes.id.nodeValue);
var sprint = new Sprint({id:sprintid.selector});
var id = ($(ev.currentTarget).attr("id"));
var AccessToken = Cookies.get('AccessToken');
sprint.url = 'rest/sprint/last/'+ id +'/'+AccessToken;
sprint.destroy({
success: function (sprint){
//window.location.reload(true);
Backbone.history.loadUrl();
},
error: function (er){
alert("Error deleting (destroy) the sprint view. line 8 in GetSprintList.js");
//window.location.reload(true);
Backbone.history.loadUrl();
}
});
}
});
, was ich erreicht habe, ist, dass die Daten aus dem aktuellen Sprint in der Liste kopiert. So wird das letzte Enddatum in das Startdatum eines neuen Sprints kopiert, außerdem werden Dauer und Kapazität kopiert. Da die Dauer kopiert wird, wird das neue Enddatum automatisch gesetzt, die Daten sind noch editierbar, was dann einen Datumsauswahlpunkt anzeigt.
Der HTML-Code, der die oben genannten Kriterien bieten:
<script type="text/template" id="sprint-list-template">
<% var url = window.location.href;
var lastPart = url.substr(url.lastIndexOf('/') + 1);
%>
<h3>Sprint List : For Team ID <%= lastPart %></h3>
<hr />
<form class="form-inline submitsprint">
<table class="table table-responsive table-hover">
<thead>
<tr><!- The labels ->
<!--<th>ID</th>-->
<th>Start Date</th>
<th>Duration</th>
<th>End Date</th>
<th>Capacity</th>
<th>Name</th>
<th> </th>
<!--<th>Team_Id</th>-->
</tr>
</thead>
<tbody>
<% _.each(sprints, function(sprints) { %>
<tr class="sprints-table" type="click" id="<%= sprints.get('id') %>">
<!--<td class="normaltd" id="<%= sprints.get('id') %>"><%= sprints.get('id') %></td>-->
<td class="normaltd" id="<%= sprints.get('id') %>"><%= sprints.get('startdate') %></td>
<td class="normaltd" id="<%= sprints.get('id') %>"><%= sprints.get('weeks') %></td>
<td class="normaltd" id="<%= sprints.get('id') %>"><%= sprints.get('enddate') %></td>
<td class="capacitytd" id="<%= sprints.get('id') %>"><%= sprints.get('capacity') %></td>
<td class="nametd" id="<%= sprints.get('id') %>"><%= sprints.get('name')%></td>
<!--<td class="normaltd" id="<%= sprints.get('id') %>"><%= sprints.get('teamid') %></td>-->
<td id="<%= sprints.get('id') %>">
<!--<button type="button" class="btn btn btn-success editsprintinlist" id="<%= sprints.get('id') %>" >edit</button>-->
<% if(sprints.get('latest')=='yes'){%><button type="button" teamid="<%= sprints.get('teamid') %>" id="<%= sprints.get('id') %>" class="btn btn-danger deleteLastsprintinlist">-</button><% }; %>
<% if(sprints.get('first')=='yes'){%><button type="button" teamid="<%= sprints.get('teamid') %>" id="<%= sprints.get('id') %>" class="btn btn-danger deleteFirstsprintinlist">-</button><% }; %></td>
</tr>
<%}); %>
<tr>
<td><input type="date" class="form-control" id="startdate" placeholder="StartDate" name="startdate" required="true" value="<%= latestSprint ? latestSprint.get('enddate') :'' %>"/></td>
<td><input type="number" class="form-control" placeholder="Weeks" id="weeks" name="weeks" required="true" value="<%= latestSprint ? latestSprint.get('weeks') :''%>" /></td>
<td><input type="date" class="form-control" id="enddate" placeholder="EndDate" name="enddate" required="true" value="<%= latestSprint ? newEndDate : '' %>"/></td>
<td><input type="text" required class="form-control" id="capacity" placeholder="Capacity" name="capacity" required="true" value="<%= latestSprint ? latestSprint.get('capacity') : '' %>"/></td>
<td><input type="text" class="form-control" id="Name" placeholder="Name" name="name" value=""/></td>
<td><input type="hidden" name="teamid" value="<%= lastPart %>" /><button type="submit" name="submitsprint" class="btn btn-success">+</button></td>
</tr>
</tbody>
</table>
</form>
<!--<a href="#team/view/<%= lastPart %>" class="btn btn-inverse">Back</a>-->
</script>
Ich bin ein Junior-Programmierer so meinen Code verzeihen ...
Jetzt für mein Problem: in Internet Explorer meinen Code nicht EDGE arbeiten wie funktionieren sollte das folgende Bild (wie im ersten Bild gezeigt) visualisiert das Problem
die neu hinzugefügt werden Sprint ist nicht mit den Daten des letzten Sprints gefüllt.
Wenn ich das Element überprüfe, ist der Wert "". während, wenn ich das gleiche Element in Firefox überprüfe, wird der Wert mit dem richtigen Wert gefüllt. Hat jemand eine Idee, wie man dieses Problem angeht?
In Ihrer Sprint-list-Vorlage, die Sie die gleiche ID für die gesamte Zeile verwenden (und nicht nur die tr aber alle td) ... – Niels