我正在尝试使用knockoutJs动态更改我的网页内容，但我遇到了问题。由于KnockoutJs的文档不是最强的文档，我可能需要一些帮助。
好吧，我试着看看这个函数是不是被调用了，它是。要查看语言变量是否有问题，他们不能。可能它与我改变一个对象而不是一个原始变量这一事实有关。
var english = {
navbar: {
dropdown1: {
title: ko.observable("About the event<span class='caret'></span>"),
menu: {
item2: ko.observable("Preview Editions"),
item3: ko.observable("Program"),
item4: ko.observable("Subscribe"),
item5: ko.observable("Testimonials")
}
},
dropdown2: {
title: ko.observable("Mais sobre o evento<span class='caret'></span>"),
menu: {
}
},
dropdown3: {
title: ko.observable("A Organização<span class='caret'></span>"),
menu: {
}
}
}
};
var portuguese = {
navbar: {
dropdown1: {
title: ko.observable("Sobre a EBEC<span class='caret'></span>"),
menu: {
item2: ko.observable("Edições Anteriores"),
item3: ko.observable("Programa"),
item4: ko.observable("Inscrição"),
item5: ko.observable("Testemunhos")
}
},
dropdown2: {
title: ko.observable("Mais sobre a EBEC<span class='caret'></span>"),
menu: {
item1: ko.observable("FAQ"),
item2: ko.observable("Edições Anteriores"),
item3: ko.observable("Programa"),
item4: ko.observable("Inscrição"),
item5: ko.observable("Testemunhos")
item6: ko.observable("Edições Anteriores"),
}
},
dropdown3: {
title: ko.observable("A Organização<span class='caret'></span>"),
menu: {
}
}
}
};
ko.applyBindings({
language: ko.observable("en"),
corpo: ko.observable(portuguese),
muda: function () {
if(this.language == "pt"){
this.corpo = english;
this.language = "en";
}else{
this.corpo = portuguese;
this.language = "pt";
}
alert(this.lingua);
// i putted that here to see if the function was being called and it is
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<!--Links meta-->
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Barra de navegacao-->
<link href="assets/img/logos/roldana-laranja.png" rel="icon" type="imagem/x-icon">
<title>EBEC Aveiro 2019</title>
<!--Google Apis-->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Kaushan+Script">
<link rel="stylesheet" type="text/css"
href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Roboto:300">
<!--Links jquery-->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
<link href="assets/css/font-awesome.min.css" rel="stylesheet">
<!--Links Form-validation-->
<link href="assets/form-validation/css/formValidation.min.css" rel="stylesheet">
<script src="assets/form-validation/js/formValidation.min.js" type="text/javascript"></script>
<script src="assets/form-validation/js/framework/bootstrap.min.js" type="text/javascript"></script>
<script src="https://knockoutjs.com/downloads/knockout-3.5.0.js"></script>
<script src="estrutura.js"></script>
<link href="assets/css/custom.css" rel="stylesheet">
<script src="assets/js/custom.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<script>
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</head>
<body data-bind="using: corpo">
<nav class="navbar navbar-default navbar-fixed-top division-blue" style="border:none;" data-bind="using: navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="roldana-EBEC" class="nav-logo-1" src="assets/img/logos/roldana-branca.png">
</a>
</div>
<div class="navbar-right hidden-xs">
<a target="_blank" href="http://bestaveiro.web.ua.pt/">
<img alt="logo-BEST" class="nav-logo-2" src="assets/img/logos/best-aveiro-white.png">
</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav specialButton">
<li class="dropdown" data-bind="using: dropdown1">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" data-bind="html: title"></a>
<ul class="dropdown-menu division-blue" data-bind="using: menu">
<li><a href="#ebec">EBEC Aveiro</a></li>
<li><a href="#ebecAnt" data-bind="text: item2"></a></li>
<li><a href="#programa" data-bind="text: item3"></a></li>
<li><a href="#apply" data-bind="text: item4"></a></li>
<li><a href="#testemunhos" data-bind="text: item5"></a></li>
</ul>
</li>
<li class="dropdown" data-bind="using: dropdown2">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" data-bind="html: title"></a>
<ul class="dropdown-menu division-blue" data-bind="using: menu">
<li><a href="#faqs" data-bind="text: item1"></a></li>
<li><a href="#juri" data-bind="text: item2"></a></li>
<li><a href="#partners" data-bind="text: item3"></a></li>
<li><a href="#equipa" data-bind="text: item4"></a></li>
<li><a href="#parceria" data-bind="text: item5"></a></li>
<li><a href="#contactos" data-bind="text: item6"></a></li>
</ul>
</li>
<li class="dropdown" data-bind="using: dropdown3">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" data-bind="html: title"></a>
<ul class="dropdown-menu division-blue" data-bind="using: menu">
<li><a href="#best" data-bind="text: item1"></a></li>
<li><a href="#info" data-bind="text: item2"></a></li>
</ul>
</li>
<li>
<a data-bind="click: $root.muda, text: lingua">EN</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
每当你想在调用applyBindings后更新文档的某些部分时，它必须绑定到observable。
您可以通过使用值调用它们来设置您的observable。
// Do this
this.language("en");
// Instead of
// this.language = "en"; // <- Knockout won't know something's changed!
你通过调用它们而没有值来阅读它们
// Do this
if (this.language() === "pt") { }
// Instead of
// if (this.language == "pt") { }
例如：
const dicts = {
"en": { greeting: "Hello" },
"de": { greeting: "Hallo" },
"nl": { greeting: "Hoi" },
"fr": { greeting: "Bonjour" }
};
const App = function() {
this.languages = Object.keys(dicts);
this.language = ko.observable("en");
this.vm = ko.pureComputed(() =>
dicts[this.language()] || dicts["en"]
);
};
ko.applyBindings(new App());<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div>
<label>
Select your language:
<select data-bind="options: languages, value: language"></select>
</label>
</div>
<div data-bind="with: vm">
<h1 data-bind="text: greeting"></h1>
</div>