使用淘汰赛动态更新 Jquery Mobile SPA 中的详细信息页面的最佳方法

Posted 2023-05-09

【中文标题】使用淘汰赛动态更新 Jquery Mobile SPA 中的详细信息页面的最佳方法

【英文标题】：best way to dynamically update a details page in Jquery Mobile SPA with knockout

【发布时间】：2015-03-30 15:49:30

【问题描述】：

我使用 Jquery Mobile 构建单页应用程序 (SPA)，我使用 Knockout.js 进行模型和数据绑定。在应用程序中，我有一个列表视图来显示食物菜单。当用户从列表视图中进行选择时，我想打开一个包含该项目详细信息的食物详细信息页面。我已经将菜单项及其大部分详细信息加载到了 knockout.js 可观察数组中。（想想简单的食品卡车菜单）。但我不确定如何将详细信息页面作为单页应用程序动态加载...

我是否应该对服务器进行另一个 ajax 调用以动态更新详细信息页面。

<a href="myFoodDetailsPage.php?id=3" rel="external">Details</a>

或者是否有一些聪明的方法可以使用我选择的 listView 项目 ID 动态更新详细信息页面。换句话说，有没有办法使用 knockout.js 根据选定的列表视图项动态构建详细信息页面？

作为 SPA 开发的新手，我想知道这个应用程序中有多少可以在单个页面中动态生成..

Jquery 移动菜单列表视图（摘录）

    <ul data-bind="foreach: FoodsModelArray"  data-role="listview"  >
    <li >
       <a href="#uib_page_food_details" data-transition="slide">
        <p><strong> <span data-bind="text: food_name"> </span> </p>
        <span data-bind="text: food_desc_abbreviated"> </span> </p>
        <p>Price: <span data-bind="text: food_price">  </span></p>
         </a>   
        </li>
        </ul> <!-- end of list view -->

Jquery 移动详情页面

    <!--  start of Food DETAILS page -->          
      <div class="upage" id="uib_page_food_details" data-role="page">

      <div data-theme="a" data-role="header" data-id="main-header">
        //header code would go here
        </div>

    <div data-role="content">
          <form action="#uib_page_food_details" method="get" >

     <div data-role="fieldcontain">
         <fieldset data-role="controlgroup" data-type="horizontal">     
          Chicken Gyro
     Cost: 12.99
    5oz of grilled chicken cutlet on Pita Bread with Tzaiki sauce
    500 calories.
         </fieldset>
        </div>

            <div data-role="fieldcontain">
                <label for="title">Notes:</label>
                <textarea name="notes" id="notes">  </textarea>
            </div>

            <div data-role="fieldcontain">
     <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Rating:</legend>
    <label for="select-choice-0" class="select">Food Rating:</label>
<select name="select-choice-0" id="select-choice-0">
  <option value="EXCELLENT">EXCELLENT</option>
  <option value="GOOD">GOOD</option>
  <option value="OK">OK</option>
  <option value="POOR">POOR</option>
  <option value="TERRIBLE">TERRIBLE</option>
 </select>
  </fieldset>
 </div>
            <a href="#uib_page_nebu" data-role="button"   data-theme="b" id="btn_update_plate" data-transition="slide" >Update</a>

        </form>
    </div>  

      </div>
<!-- End of FOOD DETAILS page -->    

【参考方案1】：

是的，它可以构建成一个页面。如何做到这一点取决于应用程序的大小，因为您需要管理页面生命周期等。

这是管理主从视图的一个非常基本的想法：

var data = [
    id: 1,
    foodName: 'Pie',
    foodDesc: 'Meat Pie',
    foodPrice: '$4.00'
, 
    id: 2,
    foodName: 'Chicken Gyro',
    foodDesc: '5oz of grilled chicken cutlet on Pita Bread with Tzaiki sauce 500 calories.',
    foodPrice: '$12.99'
, 
    id: 3,
    foodName: 'Lamb Roast',
    foodDesc: 'Roast Lamb with gravy',
    foodPrice: '$10.00'
, 
    id: 4,
    foodName: 'Apple Pie',
    foodDesc: 'Apple Pie with ice cream',
    foodPrice: '$6.50'
];

var FoodModel = function (data) 
    var self = this;
    self.id = data.id || 0;
    self.food_name = ko.observable(data.foodName || '');
    self.food_desc_abbreviated = ko.observable(data.foodDesc || '');
    self.food_price = ko.observable(data.foodPrice || '$0.00');
    return self;

var Vm = function () 
    var self = this;
    self.selectedItem = ko.observable(null);
    self.foodsModelArray = ko.observableArray($.map(data, function (item)return new FoodModel(item);));

    self.selectItem = function (item) 
        alert('load data here for item ' + item.food_name() );
        self.selectedItem(item);
    
    self.clearSelection = function()
        self.selectedItem(null);
    
    self.detailVisible = ko.pureComputed(function()
        return self.selectedItem() !== null;
    );
    self.listVisible = ko.pureComputed(function ()
        return self.selectedItem() === null;
    );
    return self;


ko.applyBindings(new Vm());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<ul data-bind="foreach: foodsModelArray, visible: listVisible" data-role="listview">
    <li> <a data-transition="slide" data-bind='click: $parent.selectItem'>
        <p><strong> <span data-bind="text: food_name"> </span> </p>
        <span data-bind="text: food_desc_abbreviated"> </span> </p>
        <p>Price: <span data-bind="text: food_price">  </span></p>
         </a> 
    </li>
</ul>
<!-- end of list view -->
<!-- start of Food DETAILS page -->
<div class="upage" id="uib_page_food_details" data-role="page" data-bind="with: selectedItem, visible: detailVisible">
    <div data-theme="a" data-role="header" data-id="main-header" data-bind="text: food_name">//header code would go here</div>
    <div data-role="content">
        <form action="#uib_page_food_details" method="get">
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal"><span data-bind='text: food_desc_abbreviated'></span>
                </fieldset>
            </div>
            <div data-role="fieldcontain">
                <label for="title">Notes:</label>
                <textarea name="notes" id="notes"></textarea>
            </div>
            <div data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal">
                    <legend>Rating:</legend>
                    <label for="select-choice-0" class="select">Food Rating:</label>
                    <select name="select-choice-0" id="select-choice-0">
                        <option value="EXCELLENT">EXCELLENT</option>
                        <option value="GOOD">GOOD</option>
                        <option value="OK">OK</option>
                        <option value="POOR">POOR</option>
                        <option value="TERRIBLE">TERRIBLE</option>
                    </select>
                </fieldset>
            </div> 
            <a data-role="button" data-theme="b" data-transition="slide" data-bind="click: $parent.clearSelection">Back</a>
            <a href="#uib_page_nebu" data-role="button" data-theme="b" id="btn_update_plate" data-transition="slide">Update</a>