如何使用KnockoutJs更改语言内容?

时间:2019-03-28 00:04:04

标签: knockout.js

我正在尝试使用淘汰表来动态更改网页的内容,但是这样做存在问题。由于KnockoutJs的文档不是最强大的文档之一,因此,我可能需要一些帮助。

好吧,我试图查看该函数是否被调用,是否被调用。要查看语言变量是否有问题,请不要。可能与im更改对象而不是原始变量有关。

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>

1 个答案:

答案 0 :(得分:0)

每当要在调用applyBindings 之后更新文档的某些部分时,都必须将其绑定到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>