0
我想一個<select>綁定到ko.observableArray和我收到此錯誤：無法處理的結合，國家沒有規定
Uncaught ReferenceError: Unable to process binding "options: function (){return _countries }" Message: country is not defined
這裏是我的代碼。
HTML：
<!-- This is the home page -->
<html>
<head>
<title>The Vegan Repository</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Load libraries -->
<!-- System.js -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system-csp-production.js">
</script>
<!-- JQuery -->
<script
src="bower_components/jquery/dist/jquery.min.js">
</script>
<!-- Bootstrap CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<!-- Bootstrap JS -->
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous">
</script>
<!-- Knockout JS -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js">
</script>
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="styles/image.css">
<link rel="stylesheet" type="text/css" href="styles/text.css">
<link rel="stylesheet" type="text/css" href="styles/header.css">
<link rel="stylesheet" type="text/css" href="styles/form.css">
<link rel="stylesheet" type="text/css" href="styles/select.css">
<!-- Google Maps API -->
<!-- <script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="scripts/map.js"></script> -->
<script src="scripts/scroll_to_anchor.js"></script>
<script src="scripts/xml2json.min.js"></script>
<script src="scripts/country.js"></script>
</head>
<body >
<div style="margin-bottom: 100px;" class="full_size dimmed">
<div style="position:fixed; z-index: -1;">
<video
style="position:fixed;"
autoplay loop muted
poster="assets/images/home_page/polina.jpg"
id="bgvid">
<!--<source src="polina.webm" type="video/webm">-->
<source src="assets/videos/polina.mp4" type="video/mp4">
</video>
</div>
<div class="header dim">
<a href="http://www.w3schools.com" ><h5 id="app-name" class="nav-item clickable white-text medium-text left-text">THE VEGAN REPOSITORY</h5></a>
<a href="http://www.w3schools.com" ><h5 (click)="clicked()" id="sign-in-button" class="nav-item clickable brand-colour-text medium-text right-text with-border">SIGN UP FREE</h5></a>
<a href="http://www.w3schools.com" ><h5 class="nav-item clickable white-text medium-text right-text">LOGIN</h5></a>
<a href="#home_page_footer" ><h5 class="nav-item clickable white-text medium-text right-text" >BLOG</h5></a>
<a href="#home_page_footer" ><h5 class="nav-item clickable white-text medium-text right-text" >ABOUT</h5></a>
</div>
<div id="motto-text" class="vertical-center">
<h5 class="white-text medium-text">THE VEGAN REPOSITORY</h5>
<h1 id="main-text" class=" text-center white-text light-text extra-large-text">FIND VEGAN PRODUCTS NEAR YOU</h1>
<a id="try-now-button" class="with-border clickable" href="#find-vegan-products-page" ><h5 class=" text-center medium-text">TRY NOW</h5></a>
</div>
</div>
<!--[if lt IE 9]>
<script>
document.createElement('video');
</script>
<![endif]-->
<?php
$host = 'localhost';
$port = 8889;
$servername = "$host:$port";
$username = "root";
$password = "root";
$db = "myDB";
// Create connection
$conn = new mysqli($servername, $username, $password, $db);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Create database
/*$sql = "CREATE DATABASE myDB";*/
// Create table
/*$sql = "CREATE TABLE Persons
( PersonID INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
LastName varchar(255),
FirstName varchar(255),
Address varchar(255),
City varchar(255)
);";*/
// Insert row into table
$sql = "INSERT INTO Persons (Firstname, Lastname, Address, City)
VALUES ('John', 'Doe', '44 Vulcan Lane', 'Auckland'),
('Jane', 'Doe', '44 Vulcan Lane', 'Auckland'),
('Becky', 'Smith', '5 Freemans Lane', 'Kaitaia'),
('Chris', 'Johnson', '18 Snow Drive', 'Christchurch');
";
// Delete all rows
/*$sql = "DELETE FROM Persons";*/
/*if ($conn->query($sql) === TRUE) {
echo "Database created successfully";
} else {
echo "Error creating database: " . $conn->error;
}*/
$conn->close();
?>
<!-- <div id="googleMap" style="height:500px;"></div> -->
<div id="find-vegan-products-page" style="height:900px;">
<div class="form-background">
<div class="container-fluid" style="padding: 40px;">
<h1>Filter Your Search!</h1>
<form role="form">
<div class="row">
<div class="form-group col-sm-6">
<!-- <select id="country-select" class="form-control input-control"></select>-->
<div class="select">
<span class="arr"></span>
<select data-bind=" options: _countries,
optionsText: country.countryName,
value: country.geonameId,
optionsCaption: 'Choose...'">
</select>
</div>
</div>
<div class="form-group col-sm-6">
<div class="select">
<span class="arr"></span>
<select id="city-select">
</select>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
打字稿：
class HomeViewModel {
_countries = ko.observableArray();
_cities = ko.observableArray();
constructor(allCountries) {
for (var index = 0; index < allCountries.length; index++) {
this._countries.push(allCountries[index]);
}
}
}
var _homeViewModel: HomeViewModel;
$(document).ready(function() {
$("#city-select").append('<option selected>Any Region</option>');
$.ajax({
url: "http://api.geonames.org/countryInfo?username=elion"
}).then(function(allCountriesXML) {
var allCountriesJSON = xml2json(allCountriesXML);
var allCountries = JSON.parse(allCountriesJSON);
_homeViewModel = new HomeViewModel(allCountries.geonames);
ko.applyBindings(_homeViewModel);
}
);
這裏是allCountries的值（從控制檯複製粘貼的小樣品）：
[0 … 99]
0: Object
country: Object
areaInSqKm: "468.0"
capital: "Andorra la Vella"
continent: "EU"
continentName: "Europe"
countryCode: "AD"
countryName: "Andorra"
currencyCode: "EUR"
east: "1.786..."
如果我將html更改爲：
<select data-bind=" options: _countries">
</select>
它可以工作，但<select>在選擇框中顯示[object] [object]。
如果我改變視圖模型的構造函數是：
constructor(allCountries) {
for (var index = 0; index < allCountries.length; index++) {
this._countries.push(allCountries[index].country.countryName);
}
}
而且還保持HTML作爲本：
<select data-bind=" options: _countries">
</select>
它的工作原理，但我沒有在任何<select>值因爲我已經擺脫了javascript對象的數組，並將其作爲一個字符串數組。
如何將javascript對象數組綁定到<select>而不抱怨_countries未定義？是否發生這種情況是因爲我在文檔準備就緒後推入了_countries數組，而在html中，我在文檔加載之前綁定了ko.observableArray？如果是這樣，我確實嘗試用值來初始化ko.observableArray，但它沒有解決問題。
你嘗試添加optionsText：'countryName'，optionsValue：'someIdOfCountry'來綁定嗎？ ..https://jsfiddle.net/8mx087a0/8/ –
如果您發佈的代碼有幫助，如果你把它裁減到只有相關的部分。 – Jeroen