如何在淘汰賽中使用「with」綁定實現分頁

Question

我需要在我的項目中需要將所選項目放入Modal中，並且用戶可以單擊next顯示下一個項目。

我正在使用綁定來顯示錶單中選定的內容。我不知道如何在「With」綁定中應用分頁。

<div class="container" data-bind="with: itemForEditing"> 
<div id="riskRegisterForm" class="modal hide fade"> 
    <div class="modal-header" style="background:#4bafef; height: 30px;">    
     <h5 style="color:#FFFFFF; font:16px Arial;">Item</h5> 
    </div> 
    <div class="modal-body" style="background:#fff"> 
     <div> 
      <form class="form-horizontal"> 
       <div class="control-group"> 
       <label class="control-label" for="itemName">Name</label> 
       <div class="controls"> 
        <input type="text" id="itemName" data-bind="value: name" /> 
       </div> 
       </div> 
       <div class="control-group"> 
       <label class="control-label" for="itemPrice">Price</label> 
       <div class="controls"> 
        <input type="number" step=".01" id="itemPrice" data-bind="value: price" /> 
       </div> 
       </div>      
      </form> 
     </div> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" data-dismiss="modal" class="btn" data-bind="click:$parent.revertItem">Cancel</button> 
     <button type="button" data-dismiss="modal" class="btn" data-bind="click:$parent.acceptItem">Update</button>    
    </div> 
    <span><a href=#>next</a></span> 
    <span><a href=#>prev</a></span> 
</div> 
</div> 

當我點擊下一個它應該自動選擇下一個記錄並放入控制。這是JsFiddle http://jsfiddle.net/ramon26cruz/Tt96J/6/

Answer 1

一種方法是這樣的：

<div class="container" data-bind="with: itemForEditing"> 
    <!-- ... --> 
    <span><a href=# data-bind="click: $root.nextItem">next</a></span> 
    <span><a href=# data-bind="click: $root.prevItem">prev</a></span> 
</div> 

和

ko.utils.extend(ViewModel.prototype, { 
    // offset the selected item by a certain amount (i.e. -1/+1 for next/prev) 
    offsetItem: function (by) { 
     var items = this.items(), 
      i = ko.utils.arrayIndexOf(items, this.selectedItem()), 
      newItem = (i > -1) ? items[i + by] : null; 

     if (newItem) { 
      this.selectItem(newItem); 
     } 
    }, 
    prevItem: function() { 
     this.offsetItem(-1); 
    }, 
    nextItem: function() { 
     this.offsetItem(1); 
    }, 
    /* ... */ 
} 

看它活http://jsfiddle.net/Tt96J/11/

Answer 2

好的，所以我一直在這。我從上面改變了我的機智。基本上我創建了2個方法。下一個和prev。在這些方法中，我找到了數組中選定/可編輯對象的索引，以及基於哪種方法被使用的增量或減量。然後，我選擇的可編輯的屬性onbjects

var Item = function(data) { 
    this.name = ko.observable(); 
    this.price = ko.observable(); 

    //populate our model with the initial data 
    this.update(data); 
}; 

//can pass fresh data to this function at anytime to apply updates or revert to a prior version 
Item.prototype.update = function(data) { 
    this.name(data.name || "new item"); 
    this.price(data.price || 0); 
}; 

var ViewModel = function(items) { 
    this.index = 0; 

    //turn the raw items into Item objects 
    this.items = ko.observableArray(ko.utils.arrayMap(items, function(data) { 
     return new Item(data); 
    })); 

    //hold the currently selected item 
    this.selectedItem = ko.observable(); 

    //make edits to a copy 
    this.itemForEditing = ko.observable(); 

    this.selectItem = this.selectItem.bind(this); 
    this.acceptItem = this.acceptItem.bind(this); 
    this.revertItem = this.revertItem.bind(this); 
    this.next = this.next.bind(this); 
    this.prev = this.prev.bind(this); 
}; 

ko.utils.extend(ViewModel.prototype, { 
    //select an item and make a copy of it for editing 
    selectItem: function(item) { 
     this.selectedItem(item); 
     this.itemForEditing(new Item(ko.toJS(item))); 
    }, 

    next:function(){ 
     var pos = this.items.indexOf(this.selectedItem()) + 1; 
     if(pos > this.items().length - 1){pos = 0}; 

     this.selectedItem(this.items()[pos]); 
     this.itemForEditing(new Item(ko.toJS(this.items()[pos]))); 
    }, 

    prev:function(){ 
     var pos = this.items.indexOf(this.selectedItem()) - 1; 
     if(pos < 0){pos = this.items().length - 1}; 

     this.selectedItem(this.items()[pos]); 
     this.itemForEditing(new Item(ko.toJS(this.items()[pos]))); 
    }, 

    acceptItem: function(item) { 
     var selected = this.selectedItem(), 
      edited = ko.toJS(this.itemForEditing()); //clean copy of edited 

     //apply updates from the edited item to the selected item 
     selected.update(edited); 

     //clear selected item 
     this.selectedItem(null); 
     this.itemForEditing(null); 
    }, 

    //just throw away the edited item and clear the selected observables 
    revertItem: function() { 
     this.selectedItem(null); 
     this.itemForEditing(null); 
    } 
}); 

ko.applyBindings(new ViewModel([ 
    { name: "Cheese", price: 2.50 }, 
    { name: "Pepperoni", price: 3.25 }, 
    { name: "Deluxe", price: 4.25 } 
])); 

繼承人的鏈接更新到我做fiddle