0

私はノックアウトを学んでおり、以下の小さな例を試しています。私が持っている 3 つのファイルは次のとおりです。

開発には 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 - 導入.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 と this をたくさん混ぜています。最初にそれをクリーンアップして、問題が解決するかどうかを確認することをお勧めします. 個人的には、self.xxxx 形式のままが好きです。

また、introduction.js ファイルの define ブロック内の「require」への参照を削除します。それはいくつかの問題を引き起こしている可能性があります。いずれにせよ、それは必要ありません。

最後に、これらすべてを Oracle JET を使用して行っているようです。Introduction.html は ojModule 内で使用されるビューであるため、< body> 要素を再度定義する必要はありません。Introduction.html は、ojModule にバインドした < div> の代わりになるフラグメントになります。

于 2016-10-10T14:45:48.510 に答える