js创建表单我有dropdownlist的问题我有自定义绑定来填充年份和车集他们不工作,因为我不知道是什么问题与 ko.bindingHandlers.passengerSeatingDropdown和ko.bindingHandlers.passengerSeatingDropdown
Uncaught ReferenceError: Unable to process binding "yearsDropdown: function (){return years }" Message: years is not defined I donpt know how to fix it
js file
$(function() {
function Car(data) {
this.Id = ko.observable(data.id);
this.Manufacturer = ko.observable(data.Manufacturer);
this.Make = ko.observable(data.Make);
this.Year = ko.observable(data.Year);
this.Colour = ko.observable(data.Colour);
this.PassengerSeat = ko.observable(data.PassengerSeat);
}
function CarViewModel() {
var self = this;
self.Id = ko.observable();
self.Manufacturer = ko.observable();
self.Make = ko.observable();
self.Colour = ko.observable();
self.PassengerSeat = ko.observable();
self.Year = ko.observable();
self.Cars = ko.observableArray([]);
self.AddCar = function() {
self.Cars.push(new Car({
Id: self.Id(),
Manufacturer: self.Manufacturer(),
Make: self.Make(),
Colour: self.Colour(),
PassengerSeat: self.PassengerSeat(),
year: self.Year()
}));
self.Id(""), self.Manufacturer(""), self.Make(""), self.Colour(""), self.PassengerSeat(""), self.PassengerSeat(""), self.Year("")
};
self.AddCar = function() {
$.ajax({
url: '/api/Cars',
type: 'POST',
data: ko.toJSON({ data: self.Cars }),
contentType: "application/json;charset=utf-8",
success: function(data) {
console.log("Car add to DB");
},
error: function(err) {
console.log(err);
}
});
}
}
$(document).ready(function() {
ko.applyBindings(new CarViewModel());
});
ko.bindingHandlers.yearsDropdown = {
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var years = ko.utils.unwrapObservable(valueAccessor());
for (i = new Date().getFullYear() ; i > 1900; i--) {
// Add each option element to the select here
$(element).append('<option value="' + i + '">' + i + '</option>');
}
}
};
ko.bindingHandlers.passengerSeatingDropdown = {
update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var passengerSeatingNumbers = ko.utils.unwrapObservable(valueAccessor());
for (var i = 2; i > 8; i = i + 2) {
// Add each option element to the select here
$(element).append('<option value="' + i + '">' + i + '</option>');
}
}
};
});
<h2>Car Edit</h2>
<div class="row">
<div class="col-lg-12">
<div class="form-horizontal">
<fieldset>
<div class="form-group">
<label for="carManufacturer" class="col-sm-2 control-label">Manufacturer</label>
<div class="col-sm-5">
<input type="text" id="carManufacturer" name="carManufacturer" class="form-control" data-bind="value: Manufacturer" required />
</div>
</div>
<!-- /carManufacturer -->
<div class="form-group">
<label for="carMake" class="col-sm-2 control-label">Make</label>
<div class="col-sm-5">
<input type="text" id="carMake" name="carMake" class="form-control" data-bind="value:Make" required />
</div>
</div>
<!-- /carMake -->
<div class="form-group">
<label for="carYear" class="col-sm-2 control-label">Year</label>
<div class="col-sm-5">
<select id="carYear" name="carYear" class="form-control" data-bind="yearsDropdown: years ">
</select>
</div>
</div>
<!-- /carYear -->
<div class="form-group">
<label for="carColour" class="col-sm-2 control-label">Colour</label>
<div class="col-sm-5">
<input type="text" id="carColour" name="carColour" class="form-control" />
</div>
</div>
<!-- /carManufacturer -->
<div class="form-group">
<label for="passengerSeating" class="col-sm-2 control-label">Passenger Seating</label>
<div class="col-sm-5">
<select id="passengerSeating" name="passengerSeating" class="form-control" data-bind="passengerSeatingDropdown: passengerSeatingNumbers">
</select>
</div>
</div>
</fieldset>
<br />
<div><p class="bg-info">Click Cancel button to return to list of Cars </p></div>
<div class="col-sm-offset-2 col-sm-10">
<input type="button" id="cancel" class="btn btn-default" value="Cancel" />
<input type="submit" id="submit" class="btn btn-primary" value="Submit" />
<input type="submit" id="update" class="btn btn-primary" value="Update" data-bind="click: AddCar"/>
<input type="reset" id="reset" class="btn btn-warning" value="Reset" />
</div>
<!-- /buttons -->
<%--</form>--%>
</div>
<!-- /form -->
</div>
<!-- /col-lg-12 -->
</div>
<!-- /row -->
答案 0 :(得分:0)
工作样本 - http://jsfiddle.net/sherin81/3Lcc16hu/1/
从您发布的代码中,您似乎不需要任何自定义绑定的输入参数。它返回当前年份到1900年的选项元素。如果是这种情况,请尝试执行以下操作。
Html绑定
<select data-bind="yearsDropdown : {}">
</select>
淘汰赛自定义绑定处理程序
ko.bindingHandlers.yearsDropdown = {
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
for (i = new Date().getFullYear() ; i >= 1900; i--) {
// Add each option element to the select here
$(element).append('<option value="' + i + '">' + i + '</option>');
}
}
};