Question

我是Knockout js的新手，需要一些建议。我想要做的（正确的方法）是在网格中列出订单和生产＆＃34;按钮，单击时，将仅显示与订单ID匹配的生产对象。我试图围绕Knockouts绑定，但我认为我在思考问题。

现在我有2个对象Order和Production with是带有observables的可观察数组。 Order具有orderId的值，而Production具有prodId的值，我正在检查匹配。我现在想知道我是否不应该在具有多维数组的对象上进行此操作。以这种方式显示所选数据会更容易吗？

这是一个初始数组的例子

       var initProduction = [
        new Production({
            proId:"183175",
            pType:"Art TIme",
            startTime:"11:20",
            stopTime:"11:50",
            totalTime:"",
            by :"MJ"
        })
        var initData = [
           new Order({
           date:"06-09-2014",
           orderId:"183175",
           name:"Columbus Africentric",
           dateRec:"05-23-2014",
           rushDate:"",
           totalQty:55,
           parts:"1",
           auto:"No",
           type:"Local",
       })
       ]

我应该组合成一个多维数组吗？如果是这样，我该怎么做？我将如何创建单击事件以在另一个表中显示相关数据，仅显示生产信息。

我希望这是有道理的，有人可以帮助我。我为自己的无知道歉。

这是我的html绑定的精简版

<table>
<tbody data-bind="foreach:filteredOrders">
  <tr>
    <td>
      <label class="read" data-bind="text:orderId, visible:true" />
      </td>
      <!-- controls -->
       <td class="tools">
    <button class="button toolButton" data-bind="click: $root.showSummary">Show Production</button>
        </td>
      </tr>
</tbody>
</table>
<h3>Production Summary</h3>
<table class="ko-grid" id="menu" > 
<tbody data-bind="foreach:filteredProds">
 <tr>
   <td>
    <div>
      <label class="read" data-bind="text:proId, visible:true" /> 
     </div>
     </td>
  </tr>     
</tbody>
</table>

Answer 1

我只有一个订单数组，然后将生产对象链接到订单。

var model = {
    orders: [
        {
            date:"06-09-2014",
            orderId:"183175",
            name:"Columbus Africentric",
            dateRec:"05-23-2014",
            rushDate:"",
            totalQty:55,
            parts:"1",
            auto:"No",
            type:"Local",
            production: {
                proId:"183175",
                pType:"Art TIme",
                startTime:"11:20",
                stopTime:"11:50",
                totalTime:"",
                by :"MJ"
            }
        },
        {
            date:"06-09-2014",
            orderId:"183176",
            name:"Angle Africentric",
            dateRec:"05-23-2014",
            rushDate:"",
            totalQty:55,
            parts:"1",
            auto:"No",
            type:"Local"
        }
    ]
};

在上面的json中，第二个订单没有生产对象。

然后在viewModel中我将使用一个计算器，它将返回订单，具体取决于是否应显示所有订单或仅显示生产订单。我在这里创建了一个与按钮链接的切换。

var ViewModel = function (model) {
    var self = this;

    self.orders = $.map(model.orders, function (order) { return new Order (order); });

    self.toggleProductionMode = function (order) {
        order.showProductionOrder(!order.showProductionOrder());
    };
};

var Order = function (order) {
    var self = this;

    ko.utils.extend(self, order);

    self.showProductionOrder = ko.observable(false);
};

查看：

<table>
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: orders">
        <tr>
            <td data-bind="text: orderId"></td>
            <td data-bind="text: name"></td>
            <td data-bind="if: production"><button data-bind="click: $root.toggleProductionMode">Toggle Production Orders</button>
            </td>
        </tr>
        <tr data-bind="visible: showProductionOrder, with: production">
            <td colspan="3">
                <table>
                    <tr>
                        <th>proId</th>
                        <th>pType</th>    
                    </tr>
                    <tr>
                        <td data-bind="text:proId"></td>
                        <td data-bind="text:pType"></td>
                    </tr>
                </table>
            </td>
        </tr>
    </tbody>
</table>

在这里演示：http://jsfiddle.net/X3LR6/2/

敲击js在点击时显示相关对象（选定的id）

1 个答案: