Mvc - Knockout Datepicker 绑定在 MVC4 上不起作用

Question

我正在尝试使用 KnockoutJs 和 jqueryUI datetimepicker 实现过于简单的日期时间绑定。

它正在处理小提琴，并创建了一个 html 文件并将代码放入其中，它也可以工作。然后我创建了一个只有一个 html 文件的 Asp.Net 项目，运行良好。

但在我实际的 MVC 4 项目中，它不起作用。检查了 jquery 和 knockoutJs 版本，看起来与 jsfiddle 相同。

  <label>Y</label>
    <input id="datepick"  data-bind="value: y"/>
   <p><span data-bind="text: y"></span></p>

JS：

  var checkin = $('#datepick').datepicker({ dateFormat: 'dd/mm/yy' });
  var viewModel=function(){
  var self=this;

  var today = new Date(); var dd = today.getDate(); var mm = today.getMonth() + 1; var yyyy = today.getFullYear();
    //January is 0! 
    if (dd < 10) { dd = '0' + dd } if (mm < 10) { mm = '0' + mm }
    today = dd + '/' + mm + '/' + yyyy;

    self.y = ko.observable(today);
     }
     var VM = new viewModel();  

   ko.applyBindings(VM);

jsfiddle

Mvc 项目页面： https://desk.datasel.com.tr/AISDev/Home/Knockout1

Answer 1

试试

将您的代码封装在DOM Ready中

$(function () {
    var checkin = $('#datepick').datepicker({
        dateFormat: 'dd/mm/yy'
    });
    var viewModel = function () {
        var self = this;
        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth() + 1;
        var yyyy = today.getFullYear();
        //January is 0! 
        if (dd < 10) {
            dd = '0' + dd
        }
        if (mm < 10) {
            mm = '0' + mm
        }
        today = dd + '/' + mm + '/' + yyyy;
        self.y = ko.observable(today);
    }
    var VM = new viewModel();
    ko.applyBindings(VM);
});

Answer 2

这就是我正在做的。 （使用 Jquery UI datepicker 和 Momemt.js）

我有一个绑定处理程序。网上找的（不记得了）

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {};
        $(element).datepicker(options);

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            var newDate = $(element).datepicker("getDate");
            // newDate format is 2013-01-11T06:11:00.000Z
            observable(moment(newDate).format('MM/DD/YYYY'));
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).datepicker("destroy");
        });

    },
    // get the value from the viewmodel and format it for display
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        var date = moment(value);
        current = $(element).datepicker("getDate");

        if (value != null) {
            if (value - current !== 0) {
                date = moment(value);
                $(element).val(date.format("DD-MM-YYYY"));
            }
        }
    }
};

像这样使用它。 data-bind="datepicker: DueDate"

<input data-bind="datepicker: DueDate" id="DueDate" name="DueDate" type="text">

Answer 3

我猜这个问题与 MVC 有关。 创建了新的 MVC 4 项目并将代码放在主页上，所以问题正在发生。

在 _Layout 页面上更改了所有 javascript 引用语法：

    <script language="javascript" type="text/javascript" src="@Url.Content("~/Content/jquery/js/jquery-1.9.1.js")"></script>

收件人

      @Scripts.Render("~/bundles/jquery")

同样在 BundleConfig.cs 上创建了这样的包：

       bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-1.10.2.js",
                    "~/Scripts/jquery-ui-1.10.4.custom.js",
                     "~/Scripts/knockout-3.0.0.js"));

谁能解释我为什么要使用“捆绑”添加脚本以在 MVC 上正确使用它们？ 它只适用于单个 .html 文件，也适用于 ASP.NET。