1

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

我正在使用 with 绑定来显示表单中选择的内容。我不知道如何在“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/

4

2 回答 2

2

好的，所以我尝试了一下。我从上面改变了我的机智。基本上我创建了2种方法。下一个和上一个。在方法中，我找到数组中选定/可编辑对象的索引，以及基于使用哪种方法的增量或减量。然后我更新选定的和可编辑的属性 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 }
]));

这是我的小提琴的链接

于 2013-10-08T15:01:15.207 回答
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/

于 2013-10-08T15:19:18.620 回答