13、深入理解 Knockout 框架在食谱应用中的应用

原创于 2025-06-17 14:21:44 发布 · 71 阅读

0 GEO检测

收录于

当前文章被以下社区和专栏收录：

探索现代Web开发的JavaScript框架精髓专栏收录该内容

41 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

深入理解 Knockout 框架在食谱应用中的应用

1. 食谱详情展示

当在食谱列表中点击某个食谱时，食谱详情会显示在右侧面板。以下是用于渲染食谱详情视图模型的 HTML 元素和 Knockout 绑定代码：

<!-- example-001/public/index.html -->
<section id="recipe-details">
  <h1 data-bind="text: title"></h1>

  <h2>Details</h2>
  <p>Servings: <span data-bind="text: servings"></span></p>
  <p>Approximate Cook Time: <span data-bind="text: cookingTime"></span></p>

  <h2>Ingredients</h2>

  <ul data-bind="foreach: ingredients">
    <li data-bind="text: $data"></li>
  </ul>

  <h2>Instructions</h2>

  <ol data-bind="foreach: instructions">
    <li data-bind="text: $data"></li>

标签