knockout.js với tùy chọnGiá trị và giá trị

Question

Có cách nào để giữ liên kết value với đối tượng không, nhưng có thuộc tính optionsValue trên đối tượng không. Kể từ bây giờ nếu tôi chỉ định cả hai, thuộc tính optionsValue được chọn sẽ điền ràng buộc value. Id muốn giữ nguyên đối tượng trong quan sát, nhưng chỉ định giá trị nào được đặt trong giá trị danh sách lựa chọn. Bằng cách này, gửi biểu mẫu sẽ gửi optionsValue tôi đã chọn.

@Html.DropDownListFor(q => q.DivisionId, new SelectList(Enumerable.Empty<string>()), new { data_bind="options: divisions, optionsText: 'Name', optionsValue: 'Id', value: division, optionsCaption: ' - '" }) 

function AddCrossPoolGameDialog() { 
    var self = this; 

    self.divisions = ko.observableArray([]); 
    self.division = ko.observable(); 

    self.awayDivisionTeams = ko.computed(function() { 
     var division = ko.utils.arrayFirst(self.divisions(), function(item) { 
      return self.division.Name() == item.Name; 
     }); 

     if (division) { 
      return division.DivisionTeamPools; 
     } 

     return []; 
    }); 
} 

Answer 1

Bạn không thể có được cả hai optionsValue và value bindings để trỏ đến đối tượng khác nhau, nhưng bạn có thể tạo ra một cách giải quyết đơn giản.

Để biểu mẫu của bạn gửi một giá trị đơn giản, hãy sử dụng optionsValue để trỏ đến thuộc tính của mặt hàng bị ràng buộc mà bạn muốn đăng bằng biểu mẫu. Sau đó gán liên kết value cho một quan sát được. Cuối cùng, tạo một computed để tự động tìm và trả lại đối tượng đúng khi giá trị được chọn thay đổi.

Ví dụ bindings:

<select data-bind="options: options, 
        optionsText: 'name', 
        optionsValue: 'id', 
        value: selectedOptionId"></select> 
<br/> 
<br/> 
Selection Option Object : <span data-bind="text: selectedOption"></span><br/> 
Selection Option name : <span data-bind="text: selectedOption().name"></span><br/> 
Selection Option id : <span data-bind="text: selectedOption().id"></span><br/> 

và xem mô hình:

var optionModel = function(id,name){ 
    var self = this; 
    self.id = id; 
    self.name = name; 
} 

var viewModel = function(){ 
    var self = this; 
    self.options = [ 
     new optionModel(1,"First"), 
     new optionModel(2,"Second") 
    ]; 
    self.selectedOptionId = ko.observable(self.options[0].id); 
    self.selectedOption = ko.computed(function(){ 
     return ko.utils.arrayFirst(self.options, function(item){ 
      return item.id === self.selectedOptionId(); 
     }); 
    }); 
} 

ko.applyBindings(new viewModel()); 

I've posted this to a jsFiddle here.

Hy vọng điều này sẽ hữu ích!