在Knockoutjs中异步加载页面
[英]Load page asynchronously in Knockoutjs
问题描述
我想立即加载页面，然后加载数据以填充select2框。 使用Knockout，我最终没有得到任何错误，但在我的select2 select框中看不到任何项目。 从服务器同步加载工作，但非常慢（因为获取app_names ）。 我到目前为止：
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin suite</title>
<!-- Load javascript libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
<!-- best interactive input box -->
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<!-- semantic -->
<!-- <link href="https://cdnjs.com/libraries/semantic-ui" rel="stylesheet"/> -->
<style>
.center {
float: none;
margin-left: auto;
margin-right: auto;
}
#centered {
width: 50%;
margin: 0 auto;
margin-top: 100
}
#middleman-datepicker {
cursor: pointer;
}
.column { float: left; padding: 5px 10px; }
.row { overflow: hidden; }
label {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
input[type=radio],
input[type=checkbox] {
-webkit-box-flex: 0;
-webkit-flex: none;
-ms-flex: none;
flex: none;
margin-right: 10px;
}
.btn-primary,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
background-color: #f49e42;
border-color: #8064A2;
}
.btn-primary:focus {
background-color: #f49542;
}
.btn-primary:hover {
background-color: #f48c42;
}
</style>
<meta id="my-data"
data-app-names="["cart", "catalog", "common-ui", "content", "ContentServices", "cyc", "deliverFromStore", "fbr", "fbt", "irg", "localization", "mylist-domain-service", "mylist-service", "mylist-ui", "nlpplus-service", "nlpservices", "orangegraph", "passbookService", "pricing", "promotion", "recommendations", "registry", "relatedsearch", "review_service", "sbotd-svcs", "SearchNavServices", "shipping", "SpecialBuy", "store-search", "storefinder", "typeahead2", "vectorsearch", "wayfinder"]">
<style>
.deactivate-services-box,
.delete-services-box {
width: 400px;
}
.clear-button {
margin-left: 10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">SLO admin suite</a>
</div>
<a data-toggle="dropdown" class="dropdown-toggle" href="#">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Navigate
<span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li class="dropdown-header"><a href="/">Middleman backfill</a></li>
<li class="dropdown-header"><a href="/healthchecks">Healthcheck statuses</a></li>
<li class="dropdown-header"><a href="/delete-services">Delete/deactivate services</a></li>
</ul></li>
</ul>
</div></a>
</div>
</nav>
<script type="text/javascript">
</script>
<div style="padding-top: 90px; float: left;" class="container">
<div >
<div class="">
<!-- https://select2.github.io/examples.html -->
<meta id="my-data"
data-app-names="["cart", "catalog", "common-ui", "content", "ContentServices", "cyc", "deliverFromStore", "fbr", "fbt", "irg", "localization", "mylist-domain-service", "mylist-service", "mylist-ui", "nlpplus-service", "nlpservices", "orangegraph", "passbookService", "pricing", "promotion", "recommendations", "registry", "relatedsearch", "review_service", "sbotd-svcs", "SearchNavServices", "shipping", "SpecialBuy", "store-search", "storefinder", "typeahead2", "vectorsearch", "wayfinder"]">
<style>
.deactivate-services-box,
.delete-services-box {
width: 400px;
}
.clear-button {
margin-left: 10px;
}
</style>
<body>
<div id="centered">
<span data-bind="visible: currently_running_ajax">
<h4>Pretending to run deactivation/deletion for 3 secs...</h4>
<p><img src="/static/img/loader.gif"/></p>
</span>
<div id="ajax-return-error-message" style="position:fixed; top:10%; right:45%; color: red; z-index: 999; display: none;"></div>
<h2>Deactivate services</h2>
<select class="deactivate-services-box" multiple="multiple" data-bind="foreach: app_names">
<option data-bind="value: $data, text: $data"></option>
</select>
<button id="deactivate-clear-all-button" class="clear-button">Clear all</button>
<h2>Permanently delete services</h2>
<select class="delete-services-box" multiple="multiple" data-bind="foreach: app_names">
<option data-bind="value: $data, text: $data"></option>
</select>
<button id="delete-clear-all-button" class="clear-button">Clear all</button>
<br><br>
<p id="empty-set-error-message" style="color: red; display: none;">Please make a selection</p>
<button id="submit-button" data-bind="click: submit_deactivation_and_or_deletion" class="btn-primary btn-lg" style="margin-left: 20px; ">Submit</button>
<button id="submit-button" data-bind="click: submit_fails_demo" class="btn-info btn-lg" style="margin-left: 20px; ">Submit will fail</button>
</div>
<script type="text/javascript">
var app_names = [];
console.log("app names 1");
// knockout
function DeleteServicesViewModel(){
var self = this;
self.app_names = app_names;
console.log("app names 2");
self.currently_running_ajax = ko.observable(false);
// var djangoData = $('#my-data').data();
// self.app_names = djangoData.appNames;
self.find_any_duplicates = function(list_one, list_two){
var duplicates = [];
for (i = 0; i < list_one.length; i++){
var item = list_one[i];
if (_.contains(list_two, item)){
duplicates.push(item);
}
}
return duplicates;
}
self.display_error_message = function(error){
setTimeout(
function() {
$("#ajax-return-error-message").text(error)
$("#ajax-return-error-message").slideDown(500, function(){
setTimeout(function(){
$("#ajax-return-error-message").slideUp(500);
}, 2600);
});
}, 300
);
}
self.submit_deactivation_and_or_deletion = function(){
var deactivate_values = $deactivate_services_box.val();
var deletion_values = $delete_services_box.val();
// alert(deactivate_values);
if (deactivate_values.length == 0 && deletion_values.length == 0){
$("#empty-set-error-message").slideDown(500, function(){
setTimeout(function(){
$("#empty-set-error-message").slideUp(500);
}, 1700);
});
return;
}
var duplicates = self.find_any_duplicates(deactivate_values, deletion_values);
if (duplicates.length){
alert("We cannot both delete and deactivate the same item. You have the following duplicates:\n\n%dups%\n\nPlease remove duplicates".replace("%dups%", duplicates));
return;
}
console.log('duplicates: ', duplicates);
self.currently_running_ajax(true);
$.ajax({
url: "/run-deactivation-and-deletion",
method: "POST",
headers: {
"Content-Type": "application/json"
},
data: ko.toJSON(
{ deactivate_list: deactivate_values, deletion_list: deletion_values }
),
success: function(data) {
console.log("worked");
$deactivate_services_box.val(null).trigger("change");
$delete_services_box.val(null).trigger("change");
},
error: function(xhr, textStatus, error) {
console.log("failed");
console.log(error);
self.currently_running_ajax(false);
self.display_error_message(error);
},
complete: function(){
self.currently_running_ajax(false);
}
});
}
// TODO: delete after demo
self.submit_fails_demo = function(){
var deactivate_values = $deactivate_services_box.val();
var deletion_values = $delete_services_box.val();
// alert(deactivate_values);
if (deactivate_values.length == 0 && deletion_values.length == 0){
$("#empty-set-error-message").slideDown(500, function(){
setTimeout(function(){
$("#empty-set-error-message").slideUp(500);
}, 1700);
});
return;
}
var duplicates = self.find_any_duplicates(deactivate_values, deletion_values);
if (duplicates.length){
alert("We cannot both delete and deactivate the same item. You have the following duplicates:\n\n%dups%\n\nPlease remove duplicates".replace("%dups%", duplicates));
return;
}
console.log('duplicates: ', duplicates);
self.currently_running_ajax(true);
$.ajax({
url: "/run-deactivation-and-deletion-fails-demo",
method: "POST",
headers: {
"Content-Type": "application/json"
},
data: ko.toJSON(
{ deactivate_list: deactivate_values, deletion_list: deletion_values }
),
// designed to fail for demo
error: function(xhr, textStatus, error) {
console.log("failed");
console.log(error);
self.currently_running_ajax(false);
self.display_error_message(error);
},
complete: function(){
self.currently_running_ajax(false);
}
});
}
}
$.getJSON("/app-names", function(data){
var app_names_json_string = data.app_names;
var app_names = JSON.parse(data.app_names);
console.log("app names 3");
ko.applyBindings(new DeleteServicesViewModel(app_names) );
var $deactivate_services_box = $(".deactivate-services-box");
var $delete_services_box = $(".delete-services-box");
$deactivate_services_box.select2();
$delete_services_box.select2();
$("#deactivate-clear-all-button").on("click", function () { $deactivate_services_box.val(null).trigger("change"); });
$("#delete-clear-all-button").on("click", function () { $delete_services_box.val(null).trigger("change"); });
});
// ko.applyBindings(new DeleteServicesViewModel() );
</script>
</body>
</div><br>
</div>
</div>
</body>
</html>
帮助页面加载的灵感是在等待ajax结果绑定淘汰模型
我想加载html，我会做旋转的gif说“加载”，做一个AJAX调用来获取我的app_names ，当app_names到达时我将它们添加到select2框并初始化select2。
2 个解决方案
解决方案1
2 2017-01-25 02:00:44
这可能有助于您在AJAX调用后将项目包装到DOM中。
首先初始化您的viewmodel（我的实例中的var PageModel）。
选择列表是observableArrays 。 将它们初始化为空，执行ajax调用。
ajax调用是延迟的，而.then（）函数有两个参数，xhr成功，xhr失败。
如果ajax成功，则将结果放入observableArray。
在你的html中设置一些条件，以防止KO抛出错误，说这里没有数据，或者你试图访问的属性不可用。
最后捎带这样一个事实：你可以订阅observable并在值改变时做一些事情，在这种情况下，它从一个空数组变为一个带有数据的数组。 如果您知道它有数据，请初步确定您认为合适的select2内容。
你可以使用异步调用数据来做各种简洁的事情。 您可以使用单击绑定来运行一个函数，该函数将数据加载到其他一些observable中以检索项目列表或新图像（IE。第二个示例）。
var PageModel = function(r) { var self = this; this.Select1 = ko.observableArray([]); self.Select1.subscribe(function (val) { if (val) { // Run function to initialize Select2 box // $('#some-select2-thingy').select2 stuff or whatever console.log('This select has data now'); } }); this.Loading1 = ko.observable(false); this.Errors = ko.observableArray([]); ajaxCall('https://api.punkapi.com/v2/beers', 'GET', self.Select1, self.Loading1, self.Errors); this.Image = ko.observable(); this.Loading2 = ko.observable(false); this.LoadImage = function() { ajaxCall('https://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=american+psycho', 'GET', self.Image, self.Loading2, self.Errors) } this.ClearImage = function () { self.Image(null); } }; window.model = new PageModel(); ko.applyBindings(model); function ajaxCall(url, method, selectObj, loadingObj, errorObj) { return $.when($.ajax({ url: url, method: method, beforeSend: function() { loadingObj(true); } })).then(function(response) { selectObj(response); loadingObj(false); }, function(error) { errorObj.push(error); }); };
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div class="container-fluid" style="margin-top: 30px;"> <div class="row" style="margin-bottom: 30px;"> <div class="col-sm-6 col-sm-push-3"> <p class="alert alert-info" data-bind="visible: Loading1()">Loading...</p> <!-- ko if: Select1().length && !Loading1() --> <select id="some-select2-thingy" class="form-control" data-bind="options: Select1, optionsText: 'name', optionsValue: 'id', optionsCaption: '- Select a Beer -'"></select> <!-- /ko --> </div> </div> <div class="row"> <div class="col-sm-6 col-sm-push-3"> <div class="text-center" style="margin-bottom: 10px;"> <button class="btn btn-info" data-bind="click: LoadImage, text: Image() ? 'Get A Different Image' : 'Get An Image'">Get An Image</button> <button class="btn btn-danger" data-bind="click: ClearImage, visible: Image()">Clear Image</button> </div> <p class="alert alert-info" data-bind="visible: Loading2()">Loading...</p> <!-- ko if: Image() && !Loading2() --> <!-- ko with: Image --> <div class="text-center"> <img data-bind="attr: {'src': data.fixed_height_downsampled_url}"> </div> <!-- /ko --> <!-- /ko --> </div> </div> </div>
解决方案2
2 已采纳 2017-01-25 02:43:58
这是一个工作小提琴，用于从ajax调用中数据绑定jquery select2。 http://jsfiddle.net/LkqTU/33425/
不确定是否有更好的方法，但我把数据放在自定义绑定的更新部分而不是init，因为它是由ajax加载的，可能不是他们的第一个。
ko.bindingHandlers.select2 = {
init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
ko.bindingHandlers.value.init(element,valueAccessor, allBindings);
$(element).select2({
})
},
update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
var data = allBindings.get('select2Data');
var dataUnwrapped = ko.toJS(data);
$(element).select2({
data: dataUnwrapped
})
var value = valueAccessor();
ko.bindingHandlers.value.update(element,valueAccessor);
}
};
如何在页面加载时异步加载图像并在加载时显示加载gif？
[英]how can I asynchronously load an image on page load and display a loading gif while it loads?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.