[英]Option values are empty when using data-bind=with in knockoutJs
我正在使用带有剔除Js的选择输入下拉菜单,但是当在剔除Js中使用data-bind = with时,选项值为空。 谁可以帮我这个事。
Dropdown.html
<span class="price"><select data-bind="options: preferedTimeToPickup,optionsCaption: 'Dont Know or Does not Matter',
optionsText: 'name',value: preferedTimeToPickupVal" id="u3413_input" ></select>
</span>
Custom.js
this.preferedTimeToPickup =
[{name:"Morning (8-11)",price:5},
{name:"Lunch (11-2)",price:6},
{name:"Afternoon (2-5)",price:7},
{name:"Specific: 8:00",price:8.5},
{name:"Specific: 9:00",price:9.5},
{name:"Specific: 10:00",price:10.25},
{name:"Specific: 11:00",price:11.25},
{name:"Specific: 12:00",price:12.25},
{name:"Specific: 1:00",price:13.25},
{name:"Specific: 2:00",price:14.25},
{name:"Specific: 3:00",price:15.25},
{name:"Specific: 4:00 (closed at 4 on sat)",price:16.25}];
this.preferedTimeToPickupVal = ko.observable();
使用下面的html显示数据
<p data-bind="with: preferedTimeToPickupVal">
<span data-bind="text: name"></span>
</p>
<p data-bind="with: preferedTimeToPickupVal">
<span data-bind="text: price"></span>
</p>
到目前为止,一切工作正常,但是在select下拉框中, value=""
为空,如果我在input type select
使用optionsValue: 'name'
,则值呈现良好,但data-bind="with: preferedTimeToPickupVal
为无法在我想显示数据的地方工作。
任何帮助,将不胜感激。
var vm = function () {
this.preferedTimeToPickup = [{
name: "Morning (8-11)",
price: 5
}
//...
]
this.preferedTimeToPickupVal = ko.observable()
}
ko.applyBindings(new vm());
编辑
好吧,我想我明白你想要什么。 请看我更新的小提琴 。
基本上,如果要在select
标记中为每个option
节点都具有value
属性,则必须在option
绑定中使用optionsValue: 'name'
选项。
这样,您现在将存储对象的name属性,而不是完整的对象。 现在,您必须找到一种方法来获取数组中与所选值匹配的正确对象。
为此,您可以使用一个临时变量来保存您的选择,并计算一个可观察到的变量,以在选择更改时过滤该数组,并获得正确的对象。
<span class="price"><select data-bind="options: preferedTimeToPickup,
optionsCaption: 'Dont Know or Does not Matter',
optionsValue: 'name',
optionsText: 'name',
value: _preferedTimeToPickupVal" id="u3413_input" ></select>
</span>
var vm = function () {
this.preferedTimeToPickup = [ {}, {} ]
this._preferedTimeToPickupVal = ko.observable();
this.preferedTimeToPickupVal = ko.pureComputed(function() {
var selectedVal = this._preferedTimeToPickupVal()
var defaultVal = { price: null, name: null }
var found = null
if (selectedVal) {
found = this.preferedTimeToPickup.filter(function(i) {
return i.name === selectedVal
})
}
return found && found[0] ? found[0] : defaultVal
}, this)
}
您只需要添加optionsValue: price
并使用pureComputed
根据所选值获取正确的信息。
function viewModel () { var self = this; self.preferedTimeToPickup = [ {name:"Morning (8-11)",price:5}, {name:"Lunch (11-2)",price:6}, {name:"Afternoon (2-5)",price:7}, {name:"Specific: 8:00",price:8.5}, {name:"Specific: 9:00",price:9.5}, {name:"Specific: 10:00",price:10.25}, {name:"Specific: 11:00",price:11.25}, {name:"Specific: 12:00",price:12.25}, {name:"Specific: 1:00",price:13.25}, {name:"Specific: 2:00",price:14.25}, {name:"Specific: 3:00",price:15.25}, {name:"Specific: 4:00 (closed at 4 on sat)",price:16.25} ]; self.selectedPrice = ko.observable(""); // use this to get the selected value object and show it on the view self.preferedTimeToPickupVal = ko.pureComputed(function() { if(self.selectedPrice() !== "") return ko.utils.arrayFirst(self.preferedTimeToPickup, function(time) { return self.selectedPrice() === time.price; }); return null; }, this); } ko.applyBindings(new viewModel());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <span class="price"> <select data-bind="options: preferedTimeToPickup,optionsCaption: 'Dont Know or Does not Matter', optionsText: 'name', optionsValue: 'price', value: selectedPrice" id="u3413_input" ></select> </span> <p data-bind="with: preferedTimeToPickupVal"> <span data-bind="text: name"></span> </p> <p data-bind="with: preferedTimeToPickupVal"> <span data-bind="text: price"></span> </p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.