javascript - KnockoutJS: How to add one observableArray to another? - Stack Overflow

admin管理员组

文章数量:1428524

I want to add selected options from select element to binding table. The view model has addItem function that add selectedItems array into addedItems array with using ko.utils.arrayPushAll(). But nothing happens when I click on Add button (calls addItem function). How to correctly add one observable array to another?

HTML

<label>Parameter list</label>
<br/>
<select multiple="multiple" 
        data-bind="options: items, selectedOptions: selectedItems, optionsText: 'name', optionsValue: 'id'">
</select>
<p>
    <button data-bind="click: addItem, enable: selectedItems().length > 0">Add</button>
</p>

<label>Selected parameters</label>
<br/>
<table data-bind="visible: addedItems().length > 0">
    <thead>
        <tr>
            <th>Name</th>
            <th>Value</th>
            <th />
        </tr>
    </thead>
    <tbody data-bind="foreach: addedItems">
        <tr>
            <td>
                <input type="hidden" data-bind="value: id"/>
                <span data-bind="text: name" /> 
            </td>
            <td><input type="text" data-bind="value: value" /></td>
            <td><a href="#" data-bind="click: $root.removeItem">Remove</a></td>
        </tr>
    </tbody>
</table>

JavaScript

​var dataSource = [
    new Parameter({ id: "1", name: "param1", value: "" }),
    new Parameter({ id: "2", name: "param2", value: "" }),
    new Parameter({ id: "3", name: "param3", value: "" })
    ];

function Parameter(data) {
    this.id = ko.observable(data.id);
    this.name = ko.observable(data.name);
    this.value = ko.observable(data.value);
}

function ParameterSelectList() {
    // Data
    var self = this;
    self.items = ko.observableArray(dataSource);
    self.selectedItems = ko.observableArray([]);
    self.addedItems = ko.observableArray([]);

    // Operations
    self.addItem = function() {
        ko.utils.arrayPushAll(self.addedItems, self.selectedItems);
        self.items.removeAll(self.selectedItems);
    };
    self.removeItem = function(item) {
        self.items.push(item);
        self.addedItems.remove(item);
    };
}

ko.applyBindings(new ParameterSelectList());​

Live example - /

UPDATED: Working example with removing selected items - /

I want to add selected options from select element to binding table. The view model has addItem function that add selectedItems array into addedItems array with using ko.utils.arrayPushAll(). But nothing happens when I click on Add button (calls addItem function). How to correctly add one observable array to another?

HTML

<label>Parameter list</label>
<br/>
<select multiple="multiple" 
        data-bind="options: items, selectedOptions: selectedItems, optionsText: 'name', optionsValue: 'id'">
</select>
<p>
    <button data-bind="click: addItem, enable: selectedItems().length > 0">Add</button>
</p>

<label>Selected parameters</label>
<br/>
<table data-bind="visible: addedItems().length > 0">
    <thead>
        <tr>
            <th>Name</th>
            <th>Value</th>
            <th />
        </tr>
    </thead>
    <tbody data-bind="foreach: addedItems">
        <tr>
            <td>
                <input type="hidden" data-bind="value: id"/>
                <span data-bind="text: name" /> 
            </td>
            <td><input type="text" data-bind="value: value" /></td>
            <td><a href="#" data-bind="click: $root.removeItem">Remove</a></td>
        </tr>
    </tbody>
</table>

JavaScript

​var dataSource = [
    new Parameter({ id: "1", name: "param1", value: "" }),
    new Parameter({ id: "2", name: "param2", value: "" }),
    new Parameter({ id: "3", name: "param3", value: "" })
    ];

function Parameter(data) {
    this.id = ko.observable(data.id);
    this.name = ko.observable(data.name);
    this.value = ko.observable(data.value);
}

function ParameterSelectList() {
    // Data
    var self = this;
    self.items = ko.observableArray(dataSource);
    self.selectedItems = ko.observableArray([]);
    self.addedItems = ko.observableArray([]);

    // Operations
    self.addItem = function() {
        ko.utils.arrayPushAll(self.addedItems, self.selectedItems);
        self.items.removeAll(self.selectedItems);
    };
    self.removeItem = function(item) {
        self.items.push(item);
        self.addedItems.remove(item);
    };
}

ko.applyBindings(new ParameterSelectList());​

Live example - http://jsfiddle/6H2PK/7/

UPDATED: Working example with removing selected items - http://jsfiddle/ebash/xxNak/

• javascript
• binding
• knockout.js
• html-select
• ko.observablearray

Share Improve this question Follow edited Mar 19, 2012 at 8:59 ebashmakov asked Mar 18, 2012 at 12:58 ebashmakovebashmakov 6491111 silver badges1818 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

There are a few things going on here:

1) You are using the 'optionsValue' binding, so selectedItems is just going to contain a list of ids

2) arrayPushAll works with "native" arrays, not observableArrays. You can still make this work by using the self.addedItems() and self.selectedItems() forms, but you will then need to call self.addedItems.valueHasMutated() to let subscribers know of the changes.

3) removeAll takes in a "native" array parameter, not an observableArray.

Here is a final fiddle that works:

http://jsfiddle/jearles/6H2PK/8/

本文标签： javascriptKnockoutJS How to add one observableArray to anotherStack Overflow