asp.net mvc 淘汰赛不起作用

Posted 2023-03-27

【中文标题】asp.net mvc 淘汰赛不起作用

【英文标题】：asp.net mvc knockout do not work

【发布时间】：2016-05-20 19:10:13

【问题描述】：

我正在尝试在 ASP.NET MVC 中启动淘汰赛示例，但它不起作用。 结果我只看到了

旅客姓名膳食附加费

淘汰部分不可用。为什么？如何解决这个问题？

@
ViewBag.Title = "Index";

<script src="~/Scripts/knockout-3.4.0.js"></script>
<h2>Index</h2>

<script>
// Class to represent a row in the seat reservations grid
function SeatReservation(name, initialMeal) 
    var self = this;
    self.name = name;
    self.meal = ko.observable(initialMeal);


// Overall viewmodel for this screen, along with initial state
function ReservationsViewModel() 
    var self = this;

    // Non-editable catalog data - would come from the server
    self.availableMeals = [
         mealName: "Standard (sandwich)", price: 0 ,
         mealName: "Premium (lobster)", price: 34.95 ,
         mealName: "Ultimate (whole zebra)", price: 290 
    ];

    // Editable data
    self.seats = ko.observableArray([
        new SeatReservation("Steve", self.availableMeals[0]),
        new SeatReservation("Bert", self.availableMeals[0])
    ]);


ko.applyBindings(new ReservationsViewModel());
</script>

<table>
<thead>
    <tr>
        <th>Passenger name</th>
        <th>Meal</th>
        <th>Surcharge</th>
        <th></th>
    </tr>
</thead>
<tbody data-bind="foreach: seats">
    <tr>
        <td data-bind="text: name"></td>
        <td data-bind="text: meal().mealName"></td>
        <td data-bind="text: meal().price"></td>
    </tr>
</tbody>
</table>

【参考方案1】：

当你调用ko.applyBindings 时，整个 DOM 应该已经准备好了。

因此，您需要将 script 块移动 到您的 table 之后（或者更可取到 html 的底部）：

@
ViewBag.Title = "Index";

<script src="~/Scripts/knockout-3.4.0.js"></script>
<h2>Index</h2>    

<table>
   ...
</table>

<script>
...

ko.applyBindings(new ReservationsViewModel());
</script>

来自documentation：

要激活淘汰赛，将以下行添加到 <script> 块：

 ko.applyBindings(myViewModel);

您可以将脚本块放在 HTML 文档的底部，也可以将其放在顶部并将内容包装在 DOM-ready 处理程序中，例如 jQuery 的 $功能。