我尝试使用双向数据绑定来让灯具上的分数变化根据结果移动球队的联赛位置。我尝试了一下，但不确定为什么它不起作用。我不知道我在做什么。我已经使用了tinysort来尝试在点属性发生变化时对它们进行排序但不知道如何动态添加到点属性并通过更改夹具结果来更改联盟的顺序。有人可以帮忙吗？
getRemainingFixtures = function(){
$.ajax({
type: 'GET',
url: '/fixtures/later_fixtures',
dataType: 'json'
}).done(function(data){
data = _.groupBy(data,'matchday');
$.each(data, function(index, day){
var matchdatediv = $('<div id="days">').css({
'margin-left': '20px',
'max-width': '80%',
'display': 'block',
'text-overflow': 'ellipsis',
'white-space': 'nowrap',
'float': 'left',
'border': '#FF4742 5px solid'
});
// var h1 = $('<h1>').html(day[0].matchday);
// matchdatediv.append(h1);
$.each(day,function(index2, game){
// var div = $('<div>');
var p = $('<p class="match">').html('<button class="homeScoreDown" style="width: 50px;text-overflow: ellipsis;white-space: normal;height: 30px; font-size: 20px;">-</button> ' + game.homeTeam + ' <button class="homeScoreUp" style="width: 50px;text-overflow: ellipsis;white-space: normal;height: 30px;font-size: 20px;">+</button> <input type="number" value="0" class="homeTeamScore" style="width: 30px;height: 20px; padding-bottom: 5px;font-size: 16px; text-align: center; line-height: 24px;" min="0"> V <input type="number" value="0" class="awayTeamScore" style="width: 30px;height: 20px; padding-bottom: 5px;font-size: 16px; text-align: center; line-height: 24px;" min="0"> <button class="awayScoreDown" style="width: 50px;text-overflow: ellipsis;white-space: normal;height: 30px; font-size: 20px;">-</button> ' + game.awayTeam + ' <button class="awayScoreUp" style="width: 50px;text-overflow: ellipsis;white-space: normal;height: 30px;font-size: 20px;">+</button>');
// div.append(p);
matchdatediv.append(p);
});
$('#fixtures').append(matchdatediv);
});
});
}
function removeSpaces(value){
return value.replace(/ /g, '');
}
function getLeague() {
$.ajax({
type: 'GET',
url: '/leagues/later_league',
dataType: 'json'
}).done(function(leg){
$.each(leg,function(index, value){
$('.league').append('<div class="team" id="'+removeSpaces(value.teamName)+'">' + value.teamName + ' ' + value.playedGames + ' ' + value.points + '</div>').css({
'padding-top': '100px',
'text-align': 'right',
});
});
tinysort('div.team',{attr:'points'});
});
};
$(function(){
$('#fixt').ready(getRemainingFixtures);
$('#leag').ready(getLeague);
$(document).on('click', '.homeScoreDown', function() {
console.log("clicked")
var $button = $(this);
var oldValue = $button.parent().find("input.homeTeamScore").val();
var newVal = parseFloat(oldValue) - 1;
if (oldValue > 0) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 0;
}
$button.parent().find("input.homeTeamScore").val(newVal);
});
$(document).on('click', '.homeScoreUp', function() {
var $button = $(this);
var oldValue = $button.parent().find("input.homeTeamScore").val();
var newVal = parseFloat(oldValue) + 1;
$button.parent().find("input.homeTeamScore").val(newVal);
});
$(document).on('click', '.awayScoreDown', function() {
var $button = $(this);
var oldValue = $button.parent().find("input.awayTeamScore").val();
var newVal = parseFloat(oldValue) - 1;
if (oldValue > 0) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 0;
}
$button.parent().find("input.awayTeamScore").val(newVal);
});
$(document).on('click', '.awayScoreUp', function() {
var $button = $(this);
var oldValue = $button.parent().find("input.awayTeamScore").val();
var newVal = parseFloat(oldValue) + 1;
$button.parent().find("input.awayTeamScore").val(newVal);
});
// WANT TO MAKE THE TWO WAY BINDING HAPPEN HERE
// If home score input changes then run if loop to see who wins
$('.homeTeamScore').on('change', function() {
if ('.homeTeamScore.val' > '.awayTeamScore.val') {
// finding winning team name and remoing spaces to...
var home = $p.child().find(".homeTeam").removeSpaces;
// ...find corresponding id in the league data
home = $(home).eq($value.teamName.index().attr('id'))
// targeting points attribute
var homeWin = parseFloat('.team.points')
//adding 3 points for a win
return homeWin + 3
} else if ('.homeTeamScore.val' < '.awayTeamScore.val') {
var away = $p.child().find(".awayTeam").removeSpaces;
away = $(away).eq($value.teamName.index().attr('id'))
var awayWin = parseFloat('.team.points')
return awayWin + 3
}
});
$('.awayTeamScore').on('change', function() {
if ('.homeTeamScore.val' > '.awayTeamScore.val') {
var home = $p.child().find(".homeTeam").removeSpaces;
home = $(home).eq($value.teamName.index().attr('id'))
var homeWin = parseFloat('.team.points')
return homeWin + 3
} else if ('.homeTeamScore.val' < '.awayTeamScore.val') {
var away = $p.child().find(".awayTeam").removeSpaces;
away = $(away).eq($value.teamName.index().attr('id'))
var awayWin = parseFloat('.team.points')
return awayWin + 3
}
});
// // listen for a click and update the scores in the fixture
// if ( "input.homeTeamScore".val !== "input.awayTeamScore".val ) {
// console.log('not the same');
// // get both teamnames from the fixture from innerhtml or value etc
// var home = $p.child().find("game.homeTeam").removeSpaces;
// console.log(home);
// var away = $p.child().find("game.awayTeam").removeSpaces;
// console.log(away);
// // get the predicted result from that fixture
// var homeScore = "input;
// console.log(homeScore);
// var awayScore = "input.awayTeamScore".val;
// console.log(awayScore);
// // finding corresponding teams in league table
// home = $(home).eq($value.teamName.index().attr('id'))
// away = $(home).eq($value.teamName.index().attr('id'))
// // update the points for both teams
// if ( homeScore > awayScore) {
// home.value.points + 3
// } else if ( awayScore > homeScore) {
// away.value.points + 3
// }
// // reorder the league
// }
});