Нокаут js не применяется - PullRequest
Новая
       12

Нокаут js не применяется

0 голосов
/ 10 марта 2020

Новичок здесь и пытается запустить Нокаут js. Использование debian 10.

Что я сделал: -установил Knockout js (установка bower install-knockout) -использовал Knockout для кода Visual Studio

Мой код: 

    <html>
    <head>
    <title>Knockout Test</title>
    </head>
    <body>


    <p>First name: <input data-bind="value: firstName" /></p>
    <p>Last name: <input data-bind="value: lastName" /></p>

    <p>Full name: <strong data-bind="text: fullName"></strong></p>

    <button data-bind="click: capitalizeLastName">Go caps</button>

   <script type="text/javascript" src="js/knockout-3.5.1.js"></script>
   <script type="text/javascript">

    function AppViewModel() {

        this.firstName = ko.observable("Bert");
        this.lastName = ko.observable("Bertington");
        /*
        this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();    
        }, this);

        this.capitalizeLastName = function() {
            var currentVal = this.lastName();        // Read the current value
            this.lastName(currentVal.toUpperCase()); // Write back a modified value
        };*/
    }
   </script>
</body>
</html>

Вот что я получаю: My testsite

1 Ответ

0 голосов
/ 11 марта 2020

Опираясь на комментарий @ adiga и сделав его рабочим примером, это то, что вам нужно. 

function AppViewModel() {

  this.firstName = ko.observable("Bert");
  this.lastName = ko.observable("Bertington");

  this.fullName = ko.computed(function() {
    return this.firstName() + " " + this.lastName();
  }, this);

  this.capitalizeLastName = function() {
    var currentVal = this.lastName(); // Read the current value
    this.lastName(currentVal.toUpperCase()); // Write back a modified value
  };
}
ko.applyBindings(new AppViewModel());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

<p>Full name: <strong data-bind="text: fullName"></strong></p>

<button data-bind="click: capitalizeLastName">Go caps</button>
...