Javascript customr binding KO.js dropdownlist错误

Javascript customr binding KO.js dropdownlist错误,javascript,html,knockout.js,Javascript,Html,Knockout.js,js创建表单我对dropdownlist有问题我有自定义绑定来填充年份和车集,它们不起作用,因为我不知道有什么问题 ko.bindingHandlers.passengerSeatingDropdown和ko.bindingHandlers.passengerSeatingDropdown js文件 $(function() { function Car(data) { this.Id = ko.observable(data.id); this.Ma

js创建表单我对dropdownlist有问题我有自定义绑定来填充年份和车集,它们不起作用,因为我不知道有什么问题 ko.bindingHandlers.passengerSeatingDropdown和ko.bindingHandlers.passengerSeatingDropdown

js文件

$(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 -->
工作样本-

从您发布的代码来看,您的自定义绑定似乎不需要任何输入参数。它返回从当前年份到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>');
        }
    }
};

看起来在ko.bindingHandlers.yearsDropdown绑定中没有对var years执行任何操作?如果是这种情况,您的html应该是data bind=yearsDropDown:{}而不是传递{}尝试像这样做yearsDropDown:true在这里拉小提琴。如果我们想改变事情的真假,这总是有用的。
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>');
        }
    }
};