Нокаут Выпадающего значения (переключатель)

Question

Я новичок в нокаут и играю с тележкой, например here

Как бы идти о присвоении значения выпадающего списка продукта на каждую линии ?. Я хочу, чтобы иметь возможность выбрать значение выбранного элемента с помощью JQuery и сохранить все функции тележки. Код, который визуализируется следующим образом:

<td> 
    <select class="form-control prodName" data-bind="options: $root.sampleProducts, optionsText: "name" , optionsCaption: "Select...", value: product"> 
    <option value="">Select...</option> 
    <option value="">Standard (sandwich) </option> 
    <option value="">Premium (lobster)</option> 
    <option value="">Ultimate (whole zebra)</option> 
    </select> 
</td> 

Нет значения ?? ... Но я хочу:

<td> 
    <select class="form-control prodName" data-bind="options: $root.sampleProducts, optionsText: "name" , optionsCaption: "Select...", value: product"> 
    <option value="">Select...</option>　　　　　 
    <option value="1">Standard (sandwich)</option>　　　　　 
    <option value="2">Premium (lobster)</option>　　　　　 
    <option value="3">Ultimate (whole zebra)</option>　　　　　 
    </select> 
</td> 

Значения визуализируются, я использовал optionsValue, но это просто вызывает телегу сломать ..

Answer 1

Как вы добавляете optionsValue к select, что делает value связывание выпадающего списка для хранения optionsValue вместо выбранного ниспадающего объекта ([значение, текст]), которое происходит перед, если вы не используете optionsValue.

Так что вам нужно изменить ViewModel соответственно

ViewModel:

self.subtotal = ko.computed(function() { 
     return self.product() ? self.product() * parseInt("0" + self.quantity(), 10) : 0; //self.product has price 
    }); 

вид:

<td class='price' data-bind='with: product'> 
    <span data-bind='text: formatCurrency($data)'> </span> //use $data 
</td> 

работает образец с полным кодом here

Answer 2

После того, как вы попробовали около 20000 различных способов, и чтение через документацию о нокауте может быть несколько раз, я закончил тем, что просто добавил новый столбец и получил установку значения id в этом (не совсем подходящее решение, но решение тем не менее). Если я использовал optionValue в любом случае, он всегда ломался, у меня был успех в обновлении ценового поля с помощью настраиваемой функции, но это, в свою очередь, нарушало субтотальную и грандиозную функциональность. Рабочая скрипку на этом here, если кому-то интересно ... надрез в HTML ниже:

<tbody data-bind='foreach: lines'> <tr> <td> <select id="mySel" data-bind='options: $root.sampleProducts, optionsText: "name", optionsCaption: "Select...", value: product'> </select> </td> <td class='id' data-bind='with: product'> <span data-bind='text: $parent.getId($data)'></span> </td> <td class='price' data-bind='with: product'> <span data-bind='text: formatCurrency(price)'> </span> </td> <td class='quantity'> <input data-bind='value: quantity, valueUpdate: "afterkeydown"' /> </td> <td class='price'> <input data-bind='value: formatCurrency(subtotal())' />
</td> <td> <a href='#' data-bind='click: $parent.removeLine'>Remove</a> </td> </tr> </tbody> </table>