javascript - knockout中 "with"绑定(bind)如何实现分页

Question

我在我的项目中有一个要求，我需要将我选择的项目放在 Modal 中，用户可以单击下一步以显示下一个项目。

我正在使用 with 绑定(bind)来显示表单中选定的内容。我不知道如何在“With”绑定(bind)中应用分页。

<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

我试过这个。我从上面改变了策略。基本上我创建了 2 个方法，一个 next 和一个 prev。在方法中，我找到了数组中选定/可编辑对象的索引，并根据使用的方法进行了递增或递减。然后我更新选定的和可编辑的属性对象:

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 }
]));

这是我的 JS Fiddle 的链接.