私は使用するアプリを作成してjaydata angularjs j query mobileおり、webSqlすべてのデータdatabaseを使用してコンテキストを作成し、保存すると、それを使用してhtmlページに追加します。私はそれがバインディングの能力だと考えていますが、データを追加してログに記録すると、データベースに保存されますが、ページ全体を更新するまでページには表示されません。ここに私の実行中のアプリケーションがありますjaydatawebSqlangularjsj query mobileangularjs2-way
私のフローのいくつかの画像は次のとおりです
アプリケーションのメイン画面
次の画面で Food Log をクリックします。データがまだ記録されていないため、最初は空です。
plus button次に、右上隅の をクリックして、新しいログを追加します
これに以下のようなデータを入力します
次に、[食品ログを追加] をクリックすると、次の画面が表示されます
しかし、実際にはこのように見える必要がありますが、このためにはページを手動で更新する必要があります
私たちが知っているangularJsように、双方向バインディングを提供しているため、更新する必要はありません。この問題で私を助けてください。これは単一のページ構造ですJ Query Mobile
コードの更新
// JavaScript File For Controlling Food Module
var myApp = angular.module('myApp',[]);
myApp.controller('foodSelection',function($scope,$location)
{
var isSubmit = "false"; // Check Before Logging. Is All Field Fill oOr Not?
_context.onReady(
{
success: function()
{
try
{
_context.FoodGroup.toArray().then(function (foodCatagories)
{
$scope.$apply(function ()
{
try
{
$scope.foodCatagories = foodCatagories; // Attach Food Groups From DB To HTML Component
}
catch(error)
{
console.log("Inner Try "+error);
}
});
});
}
catch(error)
{
console.log("Outer Try "+error);
}
},
error: function (error)
{
console.log("Error In Getting Data "+error);
}
}); // End Of Context Redy Check
$scope.changeFoodCatagory = function(foodGroupObject)
{
_context.FoodItem.filter("it.FoodGroup.FoodGroupID.startsWith('"+foodGroupObject.FoodGroupID+"')").toArray().then(function (foods)
{
$scope.$apply(function ()
{
try
{
$scope.foods = foods; // Attach FoodItem
}
catch(error)
{
console.log("Inner Try "+error);
}
})
});
}
$scope.changeFood = function(foodItemObject)
{
_context.FoodItemWeight.filter("it.FoodItem.FoodItemID.startsWith('"+foodItemObject.FoodItemID+"')").toArray().then(function (serveSizes)
{
$scope.$apply(function ()
{
try
{
$scope.serveSizes = serveSizes; // Attach ServeSize Of The Selected Food
}
catch(error)
{
console.log("Inner Try "+error);
}
})
});
}
$scope.changeServeSize = function(foodWeightObject)
{
var noOfServes = {};
noOfServes.cast = [{value: "1",text: "1"},{value: "2",text: "2"},{value: "3",text: "3"},{value: "4",text: "4"},{value: "5",text: "5"},{value: "6",text: "6"},{value: "7",text: "7"},{value: "8",text: "8"},{value: "9",text: "9"},{value: "10",text: "10"},{value: "11",text: "11"},{value: "12",text: "12"},{value: "13",text: "13"},{value: "14",text: "14"},{value: "15",text: "15"},{value: "16",text: "16"},{value: "17",text: "17"},{value: "18",text: "18"},{value: "19",text: "19"},{value: "20",text: "20"}];
$scope.noOfServes = noOfServes; // Attach No Of Servings
}
$scope.changeServeNo = function()
{
isSubmit = "true"; // Mark True As All Fields Are Select
}
$scope.go = function()
{
if(isSubmit == "true")
{
var date = Date.now();
var calcories = (($scope.food.Energ_Kcal/100)*$scope.serveSize.Gm_Wgt)*$scope.serveNo.value;
var quant = $scope.serveNo.value;
_context.FoodItem.filter("it.FoodItemID.startsWith('"+$scope.food.FoodItemID+"')").forEach(function (foods)
{
$scope.$apply(function ()
{
try
{
_context.User.filter("it.UserID.startsWith('"+1+"')").forEach(function(user)
{
_context.FoodLog.add({Quantity:quant,TotalCalories:calcories,DateTime:date,FoodItem:foods,User:user});
_context.saveChanges();
});
}
catch(error)
{
console.log("Inner Try "+error);
}
})
});
//$.mobile.changePage( "index.html#foodscreen")
$location.hash('foodscreen');
}
else
{
alert("Select All Fields");
return false;
}
} // End Of Go Function
}); // End Of Controller
myApp.controller('foodLogCtrl',function($scope,$route)
{
_context.onReady(
{
success: function()
{
try
{
_context.FoodLog.include("FoodItem").include("FoodItem.FoodGroup").toArray().then(function(foodLogs)
{
$scope.$apply(function ()
{
try
{
/*var totalCaloriesGained = 0;
for(var i=0; i<foodLogs.length; i++)
{
totalCaloriesGained += parseFloat(foodLogs[i].TotalCalories);
}
alert(totalCaloriesGained);*/
$scope.foodLogs = foodLogs; // Attach Food Logs From DB To HTML Component
}
catch(error)
{
console.log("Inner Try "+error);
}
});
});
}
catch(error)
{
console.log("Outer Try "+error);
}
},
error: function (error)
{
console.log("Error In Getting Data "+error);
}
}); // End Of Context Redy Check
$scope.deleteLog = function(id)
{
try
{
_context.FoodLog.filter('it.FoodLogID == '+id+'').forEach(function(foodlog)
{
_context.FoodLog.remove(foodlog);
_context.saveChanges();
//$route.reload();
});
}
catch(error)
{
console.log("Error Catch During Deletion "+error);
}
/*$.mobile.changePage( $("#foodscreen"),{
allowSamePageTransition: true,
transition: 'none',
reloadPage: true
});*/
$('#foodLoggedID_'+id).hide();
}//End Of Delete Function
});
myApp.controller('foodDetailLogCtrl',function($scope)
{
$scope.editLog = function(id)
{
//alert(id);
//var obj = [{foodName:"Hello"}];
try
{
_context.FoodLog.filter('it.FoodLogID == '+id+'').include("FoodItem").include("FoodItem.FoodGroup").toArray().then(function(foodDetails)
{
$scope.$apply(function ()
{
$scope.foodDetails = foodDetails;
});
});
}
catch(error)
{
console.log("Error Catch During Deletion "+error);
}
}
});
そして、私はこのようにhtmlを書きます
<ul id="foodloglist" data-role="listview" data-inset="true" data-icon="false" ng-controller="foodLogCtrl" data-split-theme="d" data-split-icon="delete">
<!--<li>
<input data-type="search" class="search" placeholder="Search" name="phonesListState.search" autofocus/>
</li>-->
<li ng:repeat="foodLog in foodLogs" id="foodLoggedID_{{foodLog.FoodLogID}}">
<a href="#foodLogDetail" ng-click="editLog(foodLog.FoodLogID);">
<img src="sm_images/128x128/food.png" class="ui-li-thumb" />
<span class="ui-li-heading">{{foodLog.FoodItem.Shrt_Desc}}</span>
<span class="ui-li-desc">{{foodLog.FoodItem.FoodGroup.Description}}</span>
<span class="ui-li-count">{{foodLog.TotalCalories}}</span>
</a>
<a href="#foodscreen" ng-click="deleteLog(foodLog.FoodLogID)" data-rel="popup" data-position-to="window" data-transition="pop">Delete</a>
</li>
</ul>