同步jquery ui選擇菜單與淘汰賽可觀察陣列

可能會涉及這種錯誤的方式，但我有一個使用foreach使用knockout可觀察數組填充的html表。在每一行我有一個下拉。我喜歡jquery ui選擇菜單，所以我正在使用它。不幸的是，當您運行小提琴時，您會注意到，在更新下拉菜單時，相應的淘汰賽選定值未被更新。同步jquery ui選擇菜單與淘汰賽可觀察陣列

這裏是小提琴https://jsfiddle.net/8rw4ruze/3/ 這裏是html。

<table class="table table-condensed table-responsive"> 
    <thead> 
    <th>id</th> 
    <th>animal</th> 
    <th>Selected Value</th> 
    </thead> 
    <tbody data-bind="foreach: tableRows"> 
    <tr> 
     <td data-bind="text: id"></td> 
     <td> 
     <select class="form-control" data-bind="options: recordList, 
        optionsText: 'desc', 
        optionsValue: 'val', 
        value: selectedVal, 
        attr: {id: selectId}"> 

     </select> 
     </td> 
     <td data-bind="text: selectedVal"></td> 
    </tr> 
    </tbody> 
</table>

這裏是JavaScript

function record(val, desc) { 
    var self = this; 
    this.val = ko.observable(val); 
    this.desc = ko.observable(desc); 
} 

function tableRow(id, recordList) { 
    var self = this; 
    this.id = ko.observable(id); 
    this.recordList = ko.observable(recordList) 
    this.selectedVal = ko.observable('A'); 
    this.selectId = ko.computed(function() { 
    return 'mySelect' + self.id() 
    }, this); 
} 

function Model() { 
    var self = this; 
    this.records = ko.observableArray(""); 
    this.tableRows = ko.observableArray(""); 
} 

var mymodel = new Model(); 

$(function() { 

    mymodel.records.push(new record('A', 'ant')); 
    mymodel.records.push(new record('B', 'bird')); 
    mymodel.records.push(new record('C', 'cat')); 
    mymodel.records.push(new record('D', 'dog')); 
    mymodel.tableRows.push(new tableRow(1, mymodel.records())); 
    mymodel.tableRows.push(new tableRow(2, mymodel.records())); 
    mymodel.tableRows.push(new tableRow(3, mymodel.records())); 
    mymodel.tableRows.push(new tableRow(4, mymodel.records())); 


    ko.applyBindings(mymodel); 

    for (var i = 0; i < 4; i++) { 
    var id = '#mySelect' + (i + 1) 
    $(id).selectmenu({ 
     width: 125, 
     change: function(event, ui) { 
     var newVal = $(this).val(); 
     mymodel.tableRows()[i].selectedVal(newVal); 
     } 
    }); 
    } 


});

感謝所有我與數據屬性去。我更喜歡使用自定義綁定，但我不夠聰明來弄清楚，所以我就這樣做了。

for (var i = 0; i < 4; i++) { 
    var id = '#mySelect' + (i + 1) 
    $(id).selectmenu({ 
     width: 125, 
     change: function(event, ui) { 
     var newVal = $(this).val(); 
     var index = $(this).data("index"); 
     mymodel.tableRows()[index].selectedVal(newVal); 
     } 
    }).data("index", i); 
    }

這裏是小提琴https://jsfiddle.net/8rw4ruze/7/

我覺得我得到了它與自定義綁定這裏是 https://jsfiddle.net/8rw4ruze/8/

來源

2016-05-17 Bryan Dellinger

'mymodel.tableRows（）[i]'是'undefined'，因爲在加載頁面後i已經是4了。 –

所以我應該爲每個選擇（1,2,3,4）添加一個數據屬性，然後在on change事件中引用select的數據屬性？ –

如果我是你，我會使用'knockout'內置'dropDown'，你可以訂閱selectedVal。例如：https：//jsfiddle.net/8rw4ruze/5/ –

Matt.k工作是正確的，你我的價值是不是你想要的它被使用時。周圍的一種方法是使用這種循環，而不是一個簡單的for：

$('select').each(function (i, e) { 
    e.selectmenu({ 
    width: 125, 
    change: function(event, ui) { 
     var newVal = $(this).val(); 
     mymodel.tableRows()[i].selectedVal(newVal); 
    } 
    }); 
});

這是有點脆弱，因爲它依賴於i和e正確對應。更強大的Knockout方法是使用綁定處理程序，它允許您指定綁定並使Knockout遍歷元素並進行必要的調用。令人驚訝的是，一點網絡搜索沒有爲我提供幫助。

我看到有一個knockout-jqueryui project on github，也可能會給你一個乾淨的方式使用你想要的部件。

來源

2016-05-17 21:28:01

感謝您的建議，我會嘗試實現一個綁定處理程序，我從來沒有這樣做過。然而在此期間，我使用了一個數據屬性（我更新了我的原始文章） –

嘿，我想我在這裏使用了自定義綁定，它是https://jsfiddle.net/8rw4ruze/8/ –

同步jquery ui選擇菜單與淘汰賽可觀察陣列

回答

相關問題