最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Multiple Select List and KnockoutJS - Stack Overflow

programmeradmin3浏览0评论

I have a multi-select list that I've implemented following the instructions on the KO site. The important portions of my code currently look like this (removed unnecessary code):

function Attribute(data) {
    var self = this;
    self.Id = data.Id;
    self.Name = data.Name;
}

// Individual Row in Table
function Criteria(data) {
    var self = this;
    self.Attributes = data.Attributes;
}

// Represent the ViewModel for attributes.
function CriteriaViewModel() {
    var self = this;

    // Catalog Data
    self.availableAttributes = window.ko.observableArray([]);
    $.getJSON(window.attributeListUrl, function(availableData) {
        self.availableAttributes($.map(availableData.Attributes, function(item) { return new Attribute(item); }));
    });

    // Editable Data
    self.criterion = window.ko.observableArray([]);

    // Load initial state from server
    $.getJSON(window.criteriaListUrl, function (availableData) {
        self.criterion($.map(availableData.Criterion, function (item) { return new Criteria(item); }));
    });
}

Then, in my HTML, I bind it all together (or, I at least try to):

     <tbody data-bind="foreach: criterion">
            <tr>
                <td>
                    <select class="selectedAttributes"
                            data-bind="options: $root.availableAttributes, selectedOptions: Attributes, optionsText: 'Name', optionsValue: 'Id'"
                            multiple
                            size="6">
                    </select>
                </td>
            </tr>
     </tbody>

The possible options display correctly. However, there is no apparent binding between the criteria's attributes against the possible options. From reading the guide, it seems as though KO should be able to bind objects directly. Can anybody provide guidance here?

I forgot to mention that everything works except the actual binding of the multi-select list. I am applying my bindings appropriately in general - just not with the multi-select list.

I have a multi-select list that I've implemented following the instructions on the KO site. The important portions of my code currently look like this (removed unnecessary code):

function Attribute(data) {
    var self = this;
    self.Id = data.Id;
    self.Name = data.Name;
}

// Individual Row in Table
function Criteria(data) {
    var self = this;
    self.Attributes = data.Attributes;
}

// Represent the ViewModel for attributes.
function CriteriaViewModel() {
    var self = this;

    // Catalog Data
    self.availableAttributes = window.ko.observableArray([]);
    $.getJSON(window.attributeListUrl, function(availableData) {
        self.availableAttributes($.map(availableData.Attributes, function(item) { return new Attribute(item); }));
    });

    // Editable Data
    self.criterion = window.ko.observableArray([]);

    // Load initial state from server
    $.getJSON(window.criteriaListUrl, function (availableData) {
        self.criterion($.map(availableData.Criterion, function (item) { return new Criteria(item); }));
    });
}

Then, in my HTML, I bind it all together (or, I at least try to):

     <tbody data-bind="foreach: criterion">
            <tr>
                <td>
                    <select class="selectedAttributes"
                            data-bind="options: $root.availableAttributes, selectedOptions: Attributes, optionsText: 'Name', optionsValue: 'Id'"
                            multiple
                            size="6">
                    </select>
                </td>
            </tr>
     </tbody>

The possible options display correctly. However, there is no apparent binding between the criteria's attributes against the possible options. From reading the guide, it seems as though KO should be able to bind objects directly. Can anybody provide guidance here?

I forgot to mention that everything works except the actual binding of the multi-select list. I am applying my bindings appropriately in general - just not with the multi-select list.

Share Improve this question asked Jun 6, 2013 at 21:12 JasCavJasCav 34.7k21 gold badges116 silver badges174 bronze badges 1
  • The main parameter for the 'selectedOptions' binding should be an array (or an observable array). This array will contain the selected values. I would expect to see something like self.chosenAttributes = window.ko.observableArray([]); – junken Commented Jun 6, 2013 at 22:47
Add a ment  | 

2 Answers 2

Reset to default 6

The attributes property on the Criteria object needs to be an observableArray. Here is a Jsfiddle demonstrating

function Criteria(data) {
    var self = this;
    self.Attributes = ko.observableArray(data.Attributes);
}

var x= $('#select1 option:selected');
   if(x.length>0){
       x.each(function(){
           alert($(this).text());
        self.selectedCategory.push(new categoryModel($(this).text()));
        $('#select1 option:selected').remove();
       });
   }

refer http://jsfiddle/deepakpandey1234/wse4gdLq/

发布评论

评论列表(0)

  1. 暂无评论