0

我正在学习淘汰赛并尝试以下一个小例子是我拥有的三个文件：索引介绍介绍

我正在使用 netbeans IDE 进行开发。

索引.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

4

1 回答 1

1

您在代码中混合了 self 和很多内容。我建议先清理一下，看看事情是否开始对你有用。就个人而言，我喜欢使用 self.xxxx 格式。

此外，在 Introduction.js 文件的定义块中删除对“require”的引用。这可能会导致一些问题。无论哪种方式，都不需要。

最后，您似乎正在使用 Oracle JET 完成所有这些工作。由于introduction.html 是一个将在ojModule 内部使用的视图，因此您不需要再次定义<body> 元素。Introduction.html 将成为一个片段，它将代替您绑定到 ojModule 的 <div>。

于 2016-10-10T14:45:48.510 回答