Блог

Главная - Вопросы по программированию - НОКАУТ: ошибка, на которую ссылается Uncaught (inpromise)

НОКАУТ: ошибка, на которую ссылается Uncaught (inpromise)

#knockout-components #oracle-jet

#нокаут-компоненты #oracle-jet

Вопрос:

Я изучаю knockout и пробую небольшой пример, ниже приведены три файла, которые у меня есть: введение в индекс введение

Я использую netbeans IDE для разработки.

index.html

 <!DOCTYPE html>

<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script data-main="js/main" src="js/libs/require/require.js"     type="text/javascript"></script>
    <link href="css/libs/oj/v2.1.0/alta/oj-alta-min.css" rel="stylesheet" type="text/css"/>
    <style>
        table, th, td {
border: 1px solid black;
padding: 15px;
}
th {
text-align: left;    
}
 thead{
 border-style: double;
 font-weight:  bold ;
 }
   tr {
text-align: left;
  }
  {background-color: #f5f5f5}
    </style>
</head>
<body>
    <div data-bind="ojModule: {name: 'introduction'}"></div>
</body>
  </html>

ViewModels — introduction.js

 /**
 * introduction module
*/
define(['ojs/ojcore', 'knockout',oj,jquery,require
], function (oj, ko) {
/**
 * The view model for the main content view template
 */
function introductionContentViewModel() {
    var self = this;
    self.firstName = ko.observable("Planet");
  self.lastName = ko.observable("Earth");

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

this.resetName=function(){
alert("Reset Name!");
this.firstName("James");
this.lastName("Potter");
};  

this.capitalizeName=function(){
var curValue=this.lastName();
this.lastName(curValue.toUpperCase());
};

     function seatReservation(fname,lname, reservMeals){
        this.firstName=fname;
        this.lastName=lname;
        this.meals = ko.observable(reservMeals);
     /*   this.formattedPrice=ko.computed(function(){
        var price = this.meals.price;
        return price ? "$"   price.toFixed(2):"none";
    });*/
    };       

      this.mealsAvailable=[{mealName:"SandWich",price:25},
        {mealName:"Roti",price:23},
        {mealName:"Dal",price:22}];

    self.seats = ko.observableArray([
    new seatReservation("Steve","Hawkins", this.mealsAvailable[0]),
    new seatReservation("Bert","Baltymoore", this.mealsAvailable[1])
  ]);

//function to add new reservation into the table
this.newReservationRow=function(){

    this.seats.push(new seatReservation("","",this.mealsAvailable[0]));
};    
}

return introductionContentViewModel;
});

просмотры -introduction.html

  <body>
<form>
 <div class='liveExample'>   
<p> First Name: <span data-bind='text: firstName'/> </p>
<p> Last Name: <span data-bind='text: lastName'/> </p>
<p>First name: <input data-bind='value: firstName' /></p> 
<p>Last name: <input data-bind='value: lastName' /></p> 
<h2>Hello, <span data-bind='text: fullName'> </span>!</h2>  
<button data-bind='click: resetName' >Reset Name </button>
<button data-bind='click: capitalizeName'>Capitalize </button>
<input type='submit' data-bind='click: resetName' value='Reset'/>
</div>
<div class="Reservations">
<h2>Reservations </h2>
<table>
<thead> <tr><td> FirstName </td><td> LastName</td> <td> Meals</td><td>         Price</td></tr></thead>
<tbody data-bind="foreach: seats">
<tr>
    <td><input data-bind="value: firstName"/> </td>
    <td><input data-bind="value: lastName"/> </td>
    <td><select data-bind="options: meals,optionsText:'mealName'"></select>      </td>
    <td data-bind="text: meals().price"> </td>
   </tr>
   </tbody>
   </table><br>
   <input type="submit" value="New Reservation" label="New Reservation"    title="Click to Make a New Reservation" data-bind="click: newReservationRow"/>
    </div>
   </form>
   </body>

Я не получаю желаемого результата. Желаемый результат выглядит примерно так по ссылке ниже

http://learn.knockoutjs.com/#/?tutorial=collections

Ответ №1:

Вы часто смешиваете self и this в своем коде. Я рекомендую сначала очистить это и посмотреть, начнет ли у вас что-то работать. Лично мне нравится придерживаться формата self.xxxx.

Кроме того, удалите ссылку на «требовать» внутри вашего блока определения в introduction.js досье. Это может вызывать некоторые проблемы. В любом случае, это не нужно.

Наконец, похоже, что вы делаете все это с помощью Oracle JET. Поскольку introduction.html это представление, которое будет использоваться внутри ojModule, вам не нужно определять элемент < body> во второй раз. introduction.html это будет фрагмент, который займет место < div>, который вы привязали к ojModule.