Mvc - привязка Knockout Datepicker не работает на MVC4

Question

Mvc - привязка Knockout Datepicker не работает на MVC4

0

Я пытаюсь реализовать слишком простое привязку Datetime с помощью KnockoutJs и jqueryUI datetimepicker.

Он работает на скрипке, создает html файл и вставляет в него коды, он также работает. Затем я создал проект Asp.Net только с одним html файлом, хорошо работающим.

Но в моем текущем проекте 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

balron 07 март 2014, в 19:32

Источник

Теги:

jquery

asp.net

asp.net-mvc

knockout.js

asp.net-mvc-4

3 ответа

Ещё вопросы

balron · Answer 1 · 2014-03-07T21-58-00.000Z

Проблема связана только с 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.

Bundling is a feature that makes it easy to combine or bundle multiple files into a single file. Fewer files means fewer HTTP requests and that can improve first page load performance. Нет необходимости добавлять сценарии с помощью пакетов, вы можете использовать теги сценариев, пакеты просто для улучшения производительности. Кажется, проблема была в другом, может быть, проблема была в последовательности тегов сценария.
Да, вы правы. Поскольку я проверяю порядок библиотек javascript на странице loayout, я вижу, что последовательность была такой: 1-knockoutJs 2-jquerycore 3-jqueryUI. Затем я поставил knockoutJS на последний и проблема была решена.

Tushar Gupta · Answer 2 · 2014-03-07T16-24-00.000Z

Пытаться

Заверните свой код в 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);
});

Отредактированный код с вашим. Пока он не обновляется. desk.datasel.com.tr/AISDev/Home/Knockout1

Romesh D. Niriella · Answer 3 · 2014-03-07T15-27-00.000Z

Это то, что я делаю. (Использование 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">

я не понимаю, как правильно его использовать. Разве он не должен содержать переменную "DueDate" внутри js?
DueDate находится внутри вашей модели. что-то вроде var VM = function(){ var DueDate = ko.observable(); }