Nakavt js içinde çoklu seçim için özel ciltleme

Question

Birden fazla seçim alanı olarak kullanmak için nakavt sırasında özel cilt oluşturmaya çalışıyorum. Örneğin: Fatura raporu için seçim ekranı tasarlamak istiyorum. Bu seçim ekranında, kullanıcıların yalnızca fatura türlerini sağlamaları için ilgilenen 'Fatura Türü' alanını kullanmak istiyorum. Bu alan için standart metin kutusu kullanırsam, kullanıcılara yalnızca bir fatura türü sağlanabilir . Seçimde birden fazla tür sağlayabilmelerini istiyorum. Benim fikrim hazırlamaktı bağlayıcı bir örneğin: Ben alanını sağlayabilir

// html 
<input data-bind="multiple: { data: optionsArray }" /> 
... 
// view model 
optionsArray = ko.observableArray(); 

'optionsArray', (çoklu fatura türleri olurdu benim durumumda) kullanıcıların çoklu bir seçeneği yapacağını. Kullanıcı arayüzüne gelirse, bunun böyle görünebileceğini düşündüm: Birden çok ciltlemeyle öğenin yanında bir düğme var. Tıkladıktan sonra, diyalog penceresi görünür ve tüm 'optionsArray' öğeleri orada görüntülenir ve değiştirilebilir, yeni eklenebilir veya silinebilir.

Bunu nasıl başaracağımı bilmiyorum çünkü iletişim kutusundaki tüm optionsArray öğelerini, gözlenebilirler olarak düzenlenebilir bir şekilde başarısız oldu ve tüm değişiklikler viewModel.optionsArray öğesinde yansıtıldı. Bu mümkün mü?

Özel bağlamalar oluşturma konusunda herhangi bir deneyiminiz var mı?

Answer 1

Bunun için custom binding oluşturmanız gerekmez. selectedOptions bağlayıcısını kullanabilirsiniz, burada belge: http://knockoutjs.com/documentation/selectedOptions-binding.html. iletişim ile örnek çalışma ve yeni seçenekler ekliyor İşte

<select data-bind="options: optionsArray, selectedOptions: selectedTypes" size="5" multiple="true"></select> 

: http://jsfiddle.net/vyshniakov/nZtZd/

Answer 2

ko.bindingHandlers.multiple = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     $(element).change(function() { 
      var actualValueArray = $(this).val().split(","); 
      valueAccessor(actualValueArray); 
     }); 
    }, 
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
     var valueArray = valueAccessor(); 
     var valueArrayUnwrapped = ko.utils.unwrapObservable(value); 
     // Join all invoice numbers using comma 
     $(element).val(valueArrayUnwrapped.join(", ")) 
    } 
}; 

multiselect için

self.optionsArray = ko.observableArray(); 
self.selectedTypes = ko.observableArray(); 

Ve bağlamak:

görünümünüzü modeline optionsArray ve selectedTypes gözlemlenebilir diziler ekle